<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en>
 <head
  profile="http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
  <title>CSS Grid Template Layout Module</title>
  <meta content="text/html; charset=utf-8" http-equiv=content-type>
  <link href="../default.css" rel=stylesheet type="text/css">

  <style type="text/css">
  .prod { font-family: inherit; font-size: inherit }
  pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
  code { font-size: inherit; }

  .level4 {color: gray; clear: both}
  .level4 h2, .level4 h3, .level4 h4 {color: inherit}
  p.level4:before, div.level4:before, li.level4:before {
    content: "LEVEL\A 4"; background: #BBB; color: white; white-space: pre;
    text-align: center; float: left; margin: 0 0.3em 0.1em 0; min-width: 0;
    border-radius: 100%; line-height: 1; font-size: small;
    padding: 1.1em 0.4em 0.6em 0.4em}

  .example .visible {border: thin dotted silver}

  /* delete this block when you've cleared out all the .replaceme elements */
  .replaceme {
   border: solid red;
   padding: 0 0.5em;
   margin: 0 0.1em;
   background: yellow;
   color: green;
  }
  .replaceme:before {
    content: "FIXME(";
    color: black;
  }
  .replaceme:after {
    content: ")";
    color: black;
  }
</style>
  <link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="https://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Grid Template Layout Module</h1>
   <!--=================================================================-->
   <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
    2 March 2012</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2012/ED-css3-layout-20120302/">http://www.w3.org/TR/2012/ED-css3-layout-20120302/</a>
     

    <dt>Latest version:

    <dd> <a
     href="http://www.w3.org/TR/css3-layout/">http://www.w3.org/TR/css3-layout/</a>
     

    <dt>Previous version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-layout-20111129/">http://www.w3.org/TR/2011/WD-css3-layout-20111129/</a>
     

    <dt>Editors:

    <dd class=vcard><span class=fn>Bert Bos</span> (<span
     class=org>W3C</span>) <a class=email href="mailto:bert@w3.org"
     rel=author>bert@w3.org</a>

    <dd class=vcard><span class=fn>César Acebal</span> (<span
     class=org>University of Oviedo</span>)
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2012 <a
    href="http://www.w3.org/"><abbr
    title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><abbr
    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
    href="http://www.ercim.eu/"><abbr
    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>
  <!--=================================================================-->

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    longdesc=diagram.desc src=diagram.png>

   <p class=caption>Above: a typical Web page. Below: the underlying grid
    template.
  </div>

  <p>CSS is a simple, declarative language for creating style sheets that
   specify the rendering of HTML and other structured documents. This module
   defines a typographic grid for CSS. It has features to set up a grid
   template, to flow content into it, and to absolutely position elements on
   a grid.

  <p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
   property sets up a matrix of rows and columns and designates empty areas
   and areas for content (called “slots”). The &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; property
   specifies into which slot an element flows. A grid templates is like a
   table in that the various slots are aligned in rows and columns and can
   automatically adapt to each others size, and it is like absolute
   positioning in that elements can be put in arbitrary slots so that the
   visual order becomes independent of the document order.

  <p>The &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
   pseudo-element allows to style the slots (backgrounds, borders, etc.)

  <p>The &lsquo;<a href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; property can be used
   instead of the &lsquo;<a href="#top"><code
   class=property>top</code></a>&rsquo;, &lsquo;<a href="#left"><code
   class=property>left</code></a>&rsquo;, &lsquo;<a href="#right"><code
   class=property>right</code></a>&rsquo; and &lsquo;<a href="#bottom"><code
   class=property>bottom</code></a>&rsquo; properties from level 2 to
   position absolutely positioned elements relative to a grid template, so
   that they align with the content in the grid.

  <p class=level4>Grid templates can also be associated with pages in paged
   media, to create page templates.

  <p class=level4>Slots can also form “chains” to create non-rectangular
   regions. A chain of slots is like a series of pages or columns: content is
   distributed over the slots by breaking it at possible break points (see
   the &lsquo;<code class=css>break-*</code>&rsquo; properties from <a
   href="#CSS3-BREAK" rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>).
   

  <p class=level4>The &lsquo;<code class=css>::fragment()</code>&rsquo;
   pseudo-element allows to select (parts of) elements based on whether they
   fall in a certain slot or not, and thus style content differently in
   different slots (region-based styling).
   <!--=================================================================-->

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p>This is a public copy of the editors' draft. It is provided for
   discussion only and may change at any moment. Its publication here does
   not imply endorsement of its contents by W3C. Don't cite this document
   other than as work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a
   href="mailto:www-style@w3.org?Subject=%5Bcss3-layout%5D%20PUT%20SUBJECT%20HERE">
   www-style@w3.org</a> (see <a
   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   discussion of this specification. When sending e-mail, please put the text
   &#8220;css3-layout&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-layout<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This draft combines ideas from earlier drafts on Template Layout, Grid
   Positioning <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a> and Grid Layout <a
   href="#CSS3-GRID-LAYOUT"
   rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>.

  <p>The section on <a href="#cr-exit-criteria">“CR exit criteria”</a>
   lists some conditions for this specification to become a W3C
   Recommendation.

  <p>Issues on this draft are mentioned in the text itself (<span
   class=issue>like this</span>) and/or in the on-line Tracker under <a
   href="http://www.w3.org/Style/CSS/Tracker/products/15">“Details on
   Product CSS3 Template Layout.”</a>
   <!--=================================================================-->

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
    <ul class=toc>
     <li><a href="#summary-and-examples"><span class=secno>1.1.
      </span>Summary and examples</a>

     <li><a href="#dependencies"><span class=secno>1.2. </span>Dependencies
      on other modules</a>

     <li><a href="#values"><span class=secno>1.3. </span>Values</a>

     <li><a href="#accessibility"><span class=secno>1.4. </span>A note about
      accessibility</a>
    </ul>

   <li><a href="#declaring-templates"><span class=secno>2. </span>Declaring
    templates</a>
    <ul class=toc>
     <li><a href="#grid-template"><span class=secno>2.1. </span> Declaring a
      template: &lsquo;<code class=property>grid-template</code>&rsquo;</a>

     <li><a href="#grid-column-sizes"><span class=secno>2.2. </span>
      Specifying the widths of columns: &lsquo;<code
      class=property>grid-columns</code>&rsquo;</a>

     <li><a href="#grid-row-sizes"><span class=secno>2.3. </span> Specifying
      the height of rows: &lsquo;<code
      class=property>grid-rows</code>&rsquo;</a>

     <li><a href="#grid-shorthand"><span class=secno>2.4. </span> The
      &lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>

     <li><a href="#default"><span class=secno>2.5. </span>Default slots</a>

     <li><a href="#slot-sizes"><span class=secno>2.6. </span>Calculating the
      size of the grid</a>
    </ul>

   <li><a href="#positioning"><span class=secno>3. </span>Putting content
    into a grid element</a>
    <ul class=toc>
     <li><a href="#flow"><span class=secno>3.1. </span>Flowing content into
      slots: &lsquo;<code class=property>flow</code>&rsquo;</a>

     <li><a href="#absolute-positioning-using-a-grid-grid-p"><span
      class=secno>3.2. </span>Absolute positioning using a grid: &lsquo;<code
      class=property>grid-position-x</code>&rsquo; and &lsquo;<code
      class=property>grid-position-y</code>&rsquo;</a>

     <li><a href="#grid-position"><span class=secno>3.3. </span> The
      &lsquo;<code class=property>grid-position</code>&rsquo; shorthand
      property</a>
    </ul>

   <li><a href="#slot-pseudo"><span class=secno>4. </span>Styling slots: the
    &lsquo;<code class=css>::slot()</code>&rsquo; pseudo-element</a>

   <li><a href="#styling-the-contents-of-slots-fragment"><span class=secno>5.
    </span>Styling the contents of slots: &lsquo;<code
    class=css>::fragment()</code>&rsquo;</a>

   <li><a href="#rendering-of-grid-elements"><span class=secno>6.
    </span>Rendering of grid elements</a>
    <ul class=toc>
     <li><a href="#vertical-alignment"><span class=secno>6.1. </span>Vertical
      alignment of the contents of slots</a>

     <li><a href="#paged"><span class=secno>6.2. </span>Breaking grid
      elements across pages or columns</a>

     <li><a href="#stacking-order"><span class=secno>6.3. </span>Stacking
      order</a>

     <li><a href="#floating-elements-inside-templates"><span class=secno>6.4.
      </span>Floating elements inside templates</a>
    </ul>

   <li><a href="#page-templates"><span class=secno>7. </span> Page-based grid
    templates</a>

   <li><a href="#chains"><span class=secno>8. </span>Chaining slots: the
    &lsquo;<code class=property>chains</code>&rsquo; property</a>

   <li><a href="#cr-exit-criteria"><span class=secno>9. </span>CR exit
    criteria</a>

   <li><a href="#history"><span class=secno>10. </span>History</a>
    <ul class=toc>
     <li><a href="#developing-a-model-of-declaring-using-st"><span
      class=secno>10.1. </span>Developing a model of declaring, using,
      styling and resizing grids</a>

     <li><a href="#syntax-features-and-levels"><span class=secno>10.2.
      </span>Syntax, features and levels</a>
      <ul class=toc>
       <li><a href="#named-vs-numbered-slots"><span class=secno>10.2.1.
        </span>Named vs numbered slots</a>

       <li><a href="#single-letter-names-vs-identifiers"><span
        class=secno>10.2.2. </span>Single letter names vs identifiers</a>

       <li><a href="#display"><span class=secno>10.2.3. </span>Extend
        &lsquo;<code class=property>display</code>&rsquo; or add a grid
        property</a>

       <li><a href="#combining-columns-and-grids"><span class=secno>10.2.4.
        </span>Combining columns and grids</a>

       <li><a href="#shorthand-vs-single-property"><span class=secno>10.2.5.
        </span>Shorthand vs single property</a>

       <li><a href="#the-number-of-rows-and-columns"><span
        class=secno>10.2.6. </span>The number of rows and columns</a>

       <li><a href="#need-fr"><span class=secno>10.2.7. </span>&lsquo;<code
        class=css>*</code>&rsquo; vs &lsquo;<code
        class=css>fr</code>&rsquo;</a>

       <li><a href="#auto-add"><span class=secno>10.2.8. </span>Automatically
        add rows and columns</a>

       <li><a href="#rectangular-slots-vs-non-rectangular-slo"><span
        class=secno>10.2.9. </span>Rectangular slots vs non-rectangular
        slots</a>

       <li><a href="#chained"><span class=secno>10.2.10. </span>Chained
        slots</a>

       <li><a href="#page-grid"><span class=secno>10.2.11. </span>Page
        grids</a>

       <li><a href="#style-the-slots-pseudo-elements"><span
        class=secno>10.2.12. </span>Style the slots (pseudo-elements)</a>

       <li><a href="#style-the-contents-of-slots-region-based"><span
        class=secno>10.2.13. </span>Style the contents of slots (region-based
        styling)</a>

       <li><a href="#orient-the-grid-with-writing-mode-vs-ori"><span
        class=secno>10.2.14. </span>Orient the grid with writing mode vs
        orient the slots</a>

       <li><a href="#indicating-the-default-slot-vs-"><span
        class=secno>10.2.15. </span>Indicating the default slot (&lsquo;<code
        class=css>*</code>&rsquo; vs &lsquo;<code
        class=css>@</code>&rsquo;)</a>

       <li><a href="#abspos"><span class=secno>10.2.16. </span>Flowing vs
        absolutely positioning content in a grid</a>

       <li><a href="#use-the-pseudo-class-to-create-additiona"><span
        class=secno>10.2.17. </span>Use the pseudo-class to create additional
        slots</a>

       <li><a href="#names-for-edges"><span class=secno>10.2.18. </span>Names
        for edges</a>

       <li><a href="#position-from-the-right-and-bottom"><span
        class=secno>10.2.19. </span>Position from the right and bottom</a>

       <li><a href="#syntax-features-to-shorten-long-grid-spe"><span
        class=secno>10.2.20. </span>Syntax features to shorten long grid
        specifications</a>

       <li><a href="#fit-content-vs-auto-vshellip"><span class=secno>10.2.21.
        </span>&lsquo;<code class=css>fit-content</code>&rsquo; vs
        &lsquo;<code class=css>auto</code>&rsquo; vs&hellip;</a>

       <li><a href="#vert-align"><span class=secno>10.2.22. </span>Vertical
        alignment inside slots</a>

       <li><a href="#horizontal-alignment-inside-slots"><span
        class=secno>10.2.23. </span>Horizontal alignment inside slots</a>

       <li><a href="#auto-margins-on-slots"><span class=secno>10.2.24.
        </span>Auto margins on slots</a>

       <li><a href="#page-floats"><span class=secno>10.2.25. </span>Page
        floats</a>

       <li><a href="#break-properties"><span class=secno>10.2.26.
        </span>Break-* properties</a>

       <li><a href="#next-same"><span class=secno>10.2.27. </span>Automatic
        placement of elements</a>
      </ul>
    </ul>

   <li><a href="#changes"><span class=secno>11. </span>Changes</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->
  <!--=================================================================-->

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <p><em>(This section is not normative.)</em>

  <h3 id=summary-and-examples><span class=secno>1.1. </span>Summary and
   examples</h3>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    longdesc=diagram.desc src=diagram.png>

   <p class=caption>Above: a typical Web page. Below: the underlying grid
    template. It has four slots, a, b, c and d and the grid template is
    defined by &lsquo;<code class=css>grid: "aaaaaaa"
    "bccccdd"</code>&rsquo;.
  </div>

  <p class=mtb>The styling of a Web page, a form or a graphical user
   interface can roughly be divided in two parts: (1) defining the overall
   “grid” of the page or window and (2) specifying the fonts, indents,
   colors, etc., of the text and other objects. The two are not completely
   separate, of course, because indenting or coloring a text influences the
   perceived grid as well. Nevertheless, when one separates the parts of a
   style that should change when the window gets bigger from the parts that
   stay the same, one often finds that the grid changes (room for a sidebar,
   extra navigation bar, big margins, larger images…), while fonts, colors,
   indents, numbering styles, and many other things don't have to change,
   until the size of the window becomes extreme.

  <p>The properties in this specification work by associating a layout grid
   with an element. Rather than letting an element lay out its descendants in
   a single flow, the policy defined in this module gives an element a
   <span>grid template,</span> which is a set of <a href="#slot">slots</a>
   aligned to an invisible grid, where each slot is a separate flow. The
   descendants are given a &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo; property to designate the slot into
   which they flow.

  <p>Because layouts on the Web have to adapt to different window and paper
   sizes, the rows and columns of the grid can be made fixed or flexible in
   size.

  <p>The typical use cases for these properties include:

  <ul>
   <li>
    <p>Complex Web pages, with multiple navigation bars in fixed positions,
     areas for advertisements, etc.

   <li>
    <p>Complex forms, where the alignment of labels and form fields may be
     easier with the properties of this module than with the properties for
     tables and margins.

   <li>
    <p>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
     complex ways and have to stay aligned (and not wrap, for example) when
     the window is resized.

   <li>
    <p class=level4>Paged displays (e.g., printed media) where each page is
     divided in fixed areas for different kinds of content.

   <li>
    <p class=level4>Complex pages with multiple regions, where the style of
     the text does not only depend on the type of element it comes from, but
     also on the region it is displayed in.
  </ul>

  <p>Once a grid template has been defined, it can also be used as an
   alternative coordinate system for absolutely positioned elements. Such
   elements do not flow into slots, but, by using &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; (instead of &lsquo;<a
   href="#top"><code class=property>top</code></a>&rsquo;, &lsquo;<a
   href="#left"><code class=property>left</code></a>&rsquo; etc.) can be
   aligned to grid lines and thus to the content in the grid.

  <p>But for many applications, template-based positioning makes absolute
   positioning unnecessary. Like absolute positioning, grid templates are
   especially useful for aligning elements that don't have simple
   relationships in the source (parent-child, ancestor-descendant, immediate
   sibling). But in contrast to absolute positioning, the elements are not
   positioned with the help of horizontal and vertical coordinates, but by
   flowing them into a template that is very much like a table: The size and
   alignment of elements are governed implicitly by the rows and columns of
   the template, and can automatically adapt to the overall size of the
   element and to the content in each row and column.

  <div class=example>
   <p>In this example, the four children of an element are assigned to four
    slots (called a, b, c and d) in a 2×2 template. (All mark-up examples in
    this specification are HTML fragments, unless otherwise stated.)

   <div class=sidefigure>
    <p><img alt="Image: sample rendering" longdesc=aapje.desc src=aapje.png>

    <p class=caption>Each element occupies one slot. In this template, all
     slots have the same size.
   </div>

   <pre>
&lt;style type="text/css"&gt;
  dl { grid: "ab"
             "cd" }
  #sym1 { flow: a }
  #lab1 { flow: b }
  #sym2 { flow: c }
  #lab2 { flow: d }
&lt;/style&gt;
&lt;dl&gt;
  &lt;dt id=sym1&gt;A
  &lt;dd id=lab1&gt;A is een aapje
  &lt;dt id=sym2&gt;B
  &lt;dd id=lab2&gt;B is de bakker
&lt;/dl&gt;
</pre>
  </div>

  <div class=example>
   <p>Templates can also help with device-independence. This example uses
    Media Queries <a href="#MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to change the overall
    layout of a page from 3-column layout for a wide screen to a 1-column
    layout for a narrow screen. It assumes the page has been marked-up with
    logical sections with IDs.

   <pre>
@media all
{
  body { grid: "aaa"
               "bcd" }
  #head { flow: a }
  #nav { flow: b }
  #adv { flow: c }
  #body { flow: d }
}
@media all and (max-width: 500px)
{
  body { grid: "a"
               "b"
               "c" }
  #head { flow: a }
  #nav { flow: b }
  #adv { display: none }
  #body { flow: c }
}
</pre>
  </div>

  <div class=example>
   <p>The slots in a grid do not overlap, unless with negative margins. Here
    is how the <a
    href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
    “zunflower” design</a> of the CSS Zen Garden could be done:

   <pre>
#container {grid: "abc"}
#container::slot(a) {box-shadow: 0.5em 0.5em 0.5em; z-index: 1}
#container::slot(b) {box-shadow: 0.5em 0.5em 0.5em; margin-left: -2em}
#intro {flow: a}
#supportingText {flow: b}
#linkList {flow: c}
</pre>
  </div>

  <div class=example>
   <p>Template-based positioning borrows some concepts from table layout, in
    particular the idea of aligning elements in rows and columns, so that
    they constrain one another's size. But there are also differences. This
    example shows some of them. Assume this document fragment:

   <pre>
&lt;div class=group>
 &lt;div>aa aa aa aa aa aa&lt;/div>
 &lt;div>bbb&lt;/div>
 &lt;div class=menu>ccccc&lt;/div>
&lt;/div>
</pre>

   <p>We can lay it out as three columns, as the following illustrations
    show. The style sheet would contain the following.

   <pre>
.group {display: table}
.group > div {display: table-cell}
</pre>

   <div class=figure>
    <p><img alt="[Three unequal cells]" longdesc=table1.desc src=table1.png>

    <p class=caption>Example of rendering with a table.
   </div>

   <p>We can also use a template, in which case the style sheet would contain
    this:

   <pre>
.group {grid: "abc"}
.group > div {flow: a}
.group > div + div {flow: b}
.group > div + div + div {flow: c}
</pre>

   <p>By default, the table is as wide as needed to fit its contents. To make
    sure it is as wide as its containing block, we need to add

   <pre>.group {display: table; width: 100%}</pre>

   <p>That is not needed for the grid template, but, on the other hand, if we
    want the template to fit its contents, we would need to say so:

   <pre>.group {grid: "abc"; width: auto}</pre>

   <p>(See <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> for the definition of
    the &lsquo;<a href="#width"><code class=property>width</code></a>&rsquo;
    property.) The columns of the template are by default all the same size.
    The columns of the table satisfy certain constraints, but the exact size
    is not defined. We can make them all the same by adding a rule (see <a
    href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>):

   <pre>.group {display: table; width: 100%; table-layout: fixed}</pre>

   <div class=figure>
    <p><img alt="[Three equal cells]" longdesc=table2.desc src=table2.png>

    <p class=caption>Example of rendering with equal columns.
   </div>

   <p>In both styles, we can set a column to a certain size:

   <pre>div.menu {width: 3em}</pre>

   <p>resp.,

   <pre>.group {grid: "abc" * * 3em}</pre>

   <div class=figure>
    <p><img alt="[Two equal cells, third is 3em wide]" longdesc=table3.desc
     src=table3.png>

    <p class=caption>Example of rendering with a fixed third column and the
     other two columns of equal width.
   </div>

   <p>If there is an unknown number of columns (children of the div.group
    element), the style sheet for the table model will automatically take
    them into account. The style sheet for the template model, however,
    creates a template of exactly three columns and can't handle tables with
    an unknown number of columns. The extra elements will be added into the
    default slot (in this case the &lsquo;<code class=css>a</code>&rsquo;
    slot).

   <p>(However, extra columns or rows <em>will</em> be created if necessary
    to absolutely position elements. See the &lsquo;<a
    href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo; property.)

   <p>In both models, elements can have borders, but only in the table model
    can borders be collapsed, which makes setting borders easier in the table
    model:

   <pre>
.group {display: table; border-collapse: collapse}
.group > div {border: solid}
</pre>

   <p>resp.,

   <pre>
.group > div {border: solid; border-left: none}
.group > div:first-child {border-left: solid}
</pre>

   <p>In the template model, the order of the elements is explicit, and thus
    it is possible to reverse the order of the columns:

   <pre>
.group > div {flow: c}
.group > div + div {flow: b}
.group > div + div + div {flow: a}
</pre>

   <div class=figure>
    <p><img alt="[Different contents for the cells]" longdesc=table4.desc
     src=table4.png>

    <p class=caption>Example of rendering with the contents of the three
     columns reversed: the third element is shown in the first slot and the
     first element in the third slot.
   </div>

   <p>In the table model, the order of the rows and columns is given by the
    document source and thus can't be changed.
  </div>

  <div class=example>
   <p>This example shows a way to move notes to the end of a section.
    “Notes” in this example refers to elements in HTML with a class of
    “note”. A fragment of HTML such as

   <pre>
&lt;div class=section>
  &lt;p>The balubious coster of the fifth secter&lt;span
    class=note> The sixth secter coster is a difter
    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
  &lt;p>&hellip;
&lt;/div>
</pre>

   <p>with this style sheet

   <pre>
div.section {
    grid: "*"
          "F"}
.note {
    flow: F;
    content: counter(note) ".\A0" contents;
    counter-increment: note;
    font-size: smaller}
.note::before {
    content: counter(note);
    vertical-align: super;
    font-size: larger}
</pre>

   <p>results in a rendering similar to this:

   <div class=figure>
    <p><img
     alt="Same text, with the SPAN replaced by “(1)” and its content moved to the end."
     longdesc=footnotes.desc src=footnotes.png>

    <p class=caption>Rendering of a text with footnotes.
   </div>

   <p>The “Generated content for paged media” module <a href="#CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> is expected to define
    specific features for footnotes that are both easier and more powerful
    than this example.
  </div>

  <div class="example level4">
   <p>This example shows the use of chained regions: text from region 1
    continues in region 2, 3 and 4. And it shows how to use pseudo-elements
    to style text in a particular region: text in region 1 is bigger than in
    other regions.

   <div class=figure>
    <p><img alt="Image of a complex, 3-column layout"
     longdesc=regions-intro-rendering.desc src=regions-intro-rendering.png>

    <p class=caption>Example rendering
   </div>

   <p>We assume a document fragment similar to this:

   <pre>
&lt;div id=article>
  &lt;h1>Introduction&lt;/h1>
  &lt;p>&lt;img src="sunset" alt="">
  &lt;p>This is an example…

  &lt;h1>More Details&lt;/h1>
  &lt;p>This illustrates…
  &lt;p>Then, the example…
  &lt;p>Finally, this…
&lt;/div>
</pre>

   <p>The style sheet makes the DIV into a template element with five
    regions, called A, *, b, c and d. The regions are grouped into two
    chains: region A on its own, and the chain consisting of *, b, c and d.

   <pre>
#article {
  grid: "A A c"
        "A A c"
        "* * c"
        "a b c";
  chains: * a b c }
</pre>

   <p>The &lsquo;<code class=css>*</code>&rsquo; is a special name. It
    indicates the <a href="#default-slot."><em>default slot,</em></a> the
    slot where content goes if it doesn't have an explicit &lsquo;<a
    href="#flow0"><code class=property>flow</code></a>&rsquo; property. We
    could have used a normal letter and added an explicit &lsquo;<a
    href="#flow0"><code class=property>flow</code></a>&rsquo; property to the
    children of the DIV, but by using * we don't have to. All children thus
    go into region * (and continue in a, b and c as needed). The IMG element
    goes into region A. We assume for simplicity that there is only one IMG
    element:

   <pre>#article img { flow: A }</pre>

   <p>The text in region * is bolder, larger and a different color than in
    the other regions. Also, an H1 that falls into this region is rendered
    differently from other H1s:

   <pre>
::slot(*) {
  font-weight: bold;
  color: #0C3D5F;
  font-size: larger }
h1::slot(*) {
  color: crimson;
  display: run-in }
</pre>

   <p>(For brevity, the example doesn't show the style rules to set the color
    and background, to make the text justified, add the left border to the
    second H1, etc.)

   <p>As the image shows, the text of the last paragraph isn't complete and
    presumably continues somewhere else, but that part is outside the scope
    of this example. In paged media, we could attach the grid template to a
    page instead of an element and let the text continue on the next page; we
    could also make slot c into a multi-column element so that the text forms
    additional columns to the right of current image (see <a href="#CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> for some ideas), or we
    could allow a scrollbar on slot c.
  </div>
  <!--=================================================================-->

  <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
   modules</h3>

  <p>This CSS3 module depends on the following other CSS3 modules:

  <ul>
   <li><cite>CSS 2.1</cite> <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> &ndash; <a
    href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"><dfn
    id=block-container>block container</dfn></a> and property <dfn
    id=content>content</dfn>.

   <li><cite>CSS syntax module</cite> <a href="#CSS3SYN"
    rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> &ndash; <dfn
    id=interactive>interactive</dfn> vs <dfn
    id=non-interactive>non-interactive</dfn> media.

   <li><cite>CSS values and Units module</cite> <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> &ndash; <a
    href="/TR/css3-values#strings"> <dfn
    id=ltstringgt><var>&lt;string&gt;</var></dfn></a> and <a
    href="/TR/css3-values#length-value"> <dfn
    id=ltlengthgt><var>&lt;length&gt;</var></dfn></a>.

   <li><cite>CSS box module</cite> <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> &ndash; properties <dfn
    id=margin>margin</dfn>, <dfn id=margin-right>margin-right</dfn>, <dfn
    id=margin-left>margin-left</dfn>, <dfn id=width>width</dfn>, <dfn
    id=height>height</dfn>, <dfn id=float>float</dfn>, <dfn
    id=display0>display</dfn> and <dfn id=overflow>overflow</dfn>

   <li><cite>CSS text layout</cite> <a href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
    &ndash; defines <dfn id=block-flow-direction>block flow direction</dfn>
    and the properties <dfn id=direction>direction</dfn> and <dfn
    id=writing-mode>writing-mode</dfn>. The latter defines when an element
    has a <dfn id=vertical-writing-mode>vertical writing mode</dfn> (text
    lines are vertical) or a <dfn id=horizontal-writing-mode>horizontal
    writing mode</dfn> (text lines are horizontal). For brevity, we refer to
    the former as a <dfn id=vertical-element
    title="vertical|vertical element">vertical element</dfn> and to the
    latter as a <dfn id=horizontal-element.
    title="horizontal|horizontal element">horizontal element.</dfn>

   <li><cite>CSS positioning</cite> <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a> &ndash; properties <dfn
    id=z-index>z-index</dfn>, <dfn id=position>position</dfn>, <dfn
    id=top>top</dfn>, <dfn id=right>right</dfn>, <dfn id=bottom>bottom</dfn>,
    <dfn id=left>left</dfn>.

   <li><cite>CSS fragmentation</cite> <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> &ndash; properties
    <dfn id=break-before>break-before</dfn>, <dfn
    id=break-after>break-after</dfn> and <dfn
    id=break-inside>break-inside</dfn>; the definition of <dfn
    id=fragmenter>fragmenter</dfn>.

   <li><cite>CSS paged media</cite> <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> &ndash; definition of
    <dfn id=page-area>page area</dfn> (in particular its width &amp; height).
    

   <li><cite>CSS background and borders</cite> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> &ndash; properties <dfn
    id=background>background</dfn>, <dfn
    id=background-image>background-image</dfn>, <dfn
    id=background-size>background-size</dfn>, <dfn
    id=box-decoration-break>box-decoration-break</dfn> <span class=issue>and
    <dfn id=box-shadow>box-shadow</dfn>?</span>

   <li><cite>CSS tables</cite> <a href="#CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a> &ndash; property <dfn
    id=vertical-align>vertical-align</dfn>. <span class=issue>[or Box
    Module?]</span>

   <li><cite>CSS Multi-column Layout Module</cite> <a href="#CSS3COL"
    rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> &ndash; property <dfn
    id=columns>columns</dfn>.

   <li><cite>CSS Fragmentation Module</cite> <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> &ndash; properties
    <dfn id=break-before0>break-before</dfn>, <dfn
    id=break-after0>break-after</dfn> and <dfn
    id=break-inside0>break-inside</dfn>.
  </ul>

  <p class=issue>Add to the above all the properties that are allowed on
   slots (see <a href="#slot-pseudo">“The &lsquo;<code
   class=css>::slot()</code>&rsquo; pseudo-element”</a>).

  <p>It has non-normative (informative) references to the following other
   CSS3 modules:

  <ul>
   <li><cite>Selectors</cite> <a href="#SELECT"
    rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
  </ul>

  <p>See <a
   href="http://www.w3.org/TR/CSS21/about.html#property-defs">section&nbsp;1.4.2
   of CSS level&nbsp;2</a> <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> for the grammar and other
   notations that this specification uses in property definitions.
   <!--=================================================================-->

  <h3 id=values><span class=secno>1.3. </span>Values</h3>

  <p>This specification follows the <a
   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   definition conventions</a> from <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   this specification are defined in CSS Level 2 Revision 1 <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   modules may expand the definitions of these value types: for example <a
   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   when combined with this module, expands the definition of the
   &lt;color&gt; value type as used in this specification.

  <p>In addition to the property-specific values listed in their definitions,
   all properties defined in this specification also accept the <a
   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   keyword as their property value. For readability it has not been repeated
   explicitly.
   <!--=================================================================-->

  <h3 id=accessibility><span class=secno>1.4. </span>A note about
   accessibility</h3>

  <p><em>(This section is not normative.)</em>

  <p>The facilities in this specification allow elements from a document to
   be displayed in a visual order that is to a large extent independent of
   the order in the document. That may have both positive and negative
   effects on accessibility. The positive aspect is that it allows the
   content in the document to be kept in logical order, so that the document
   is as functional as possible without the style sheet and on media where
   the style sheet doesn't apply. A negative aspect is that a document that
   has a defined tab order (the order in which elements get the focus when
   the tab-key is pressed) will show on the screen with a tab order unrelated
   to the visual order. It may be necessary to use the keyboard control
   features of the CSS Basic User Interface module <a href="#CSS3UI"
   rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> to ensure that the tab
   navigation follows the visual order, or to refrain from positioning
   semantically related elements in different parts of a template.

  <p>The following two requirements from the Web Content Accessibility
   Guidelines (WCAG) 2.0 <a href="#WCAG20"
   rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a> are particularly relevant.
   See that specification for more information.

  <blockquote>
   <p><a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"><strong>1.3.2
    Meaningful Sequence:</strong></a> When the sequence in which content is
    presented affects its meaning, a <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef">correct
    reading sequence</a> can be <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef ">programmatically
    determined.</a> (Level A)
  </blockquote>

  <blockquote>
   <p><a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"><strong>2.4.3
    Focus Order:</strong></a> If a <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef">Web
    page</a> can be <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef">navigated
    sequentially</a> and the navigation sequences affect meaning or
    operation, focusable components receive focus in an order that preserves
    meaning and operability. (Level A)
  </blockquote>
  <!--=================================================================-->

  <h2 id=declaring-templates><span class=secno>2. </span>Declaring templates</h2>

  <p>Grid templates are declared with the &lsquo;<a
   href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo;,
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; and &lsquo;<a
   href="#grid"><code class=property>grid</code></a>&rsquo; properties,
   defined below.

  <p>An element that has a grid template is called a <dfn
   id=grid-element.>grid element.</dfn> More precisely: an element is a grid
   element if (1) it generates a <span>block container box</span> <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and (2) at
   least one of &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; or
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; has a value other than the
   initial value.

  <p class=note>Block containers are, informally, elements that can have
   block elements as children, such as blocks, inline blocks or table cells,
   but not inline elements or replaced elements.

  <p>An element's <dfn id=grid-ancestor>grid ancestor</dfn> is the nearest
   ancestor that is a <a href="#grid-element.">grid element.</a>

  <p class=note>Note that not all elements have a grid ancestor. E.g., the
   root element has none.

  <p>The <dfn id=number-of-columns>number of columns</dfn> of a grid element
   is the number of <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>
   values in &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; or the number of columns in
   &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;, whichever is larger.

  <p>The <dfn id=number-of-rows>number of rows</dfn> is the number of <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values in
   &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; or the number of rows in
   &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;, whichever is larger.

  <p class=note>Note that a grid element always has at least one row and one
   column. Those may, however, have zero size.
   <!--=================================================================-->

  <h3 id=grid-template><span class=secno>2.1. </span> Declaring a template:
   &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;</h3>

  <p>The &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo; property implicitly assigns
   a grid to an element and defines named slots in the grid. It can also
   designate a slot as the <a href="#default-slot."><em>default slot</em></a>
   for content without an explicit flow.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template0>grid-template</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | <a href="#ltstringgt"><var>&lt;string&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container elements</a> <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Each string consist of one or more asterisks (“*”), letters, periods
   (“.”), spaces and tabs. Each string represents one row in the
   template, each symbol other than a space or tab represents one column in
   that row. Spaces and tabs have no meaning. They may be added for
   readability.

  <p>The symbols in the template have the following meaning

  <dl>
   <dt>&lt;letter&gt;

   <dd> Named slot for content.
    <p class=issue>CSS doesn't yet have a type corresponding to single
     letter. The letters in this module are also used outside of strings (on
     &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;,
     e.g.), so they should be a subset of identifiers. There is a
     “nmstart” macro in the grammar, but it is not exactly what we want
     here. E.g., U+0300 (“combining grave accent”) is a valid first
     character for an identifier, but may not be desirable as a slot in a
     template. We probably want a definition based on the principle that it
     is a single letter if it <em>looks</em> like a single letter. This may
     correspond to the notion of <em>character cluster.</em> (There may also
     be a connection with the open issue against the CSS syntax about Unicode
     normalization. We want é to match é, no matter if the author typed
     U+0301 U+0065 or U+00C9.)

   <dt>*

   <dd> (Asterisk.) Default slot for content (explained below).

   <dt>.

   <dd> (Period.) Blank space.
  </dl>

  <p>Multiple identical letters in adjacent rows or columns form a single
   <dfn id=slot>slot</dfn> that spans those rows and columns. Ditto for
   multiple “*”s. Slot names are case-sensitive, so uppercase and
   lowercase letters are considered to be different letters.

  <p>Non-rectangular slots and multiple slots with the same letter are
   illegal. A template without any letter or “*” is illegal. A template
   with more than one “*” slot is illegal. These errors cause the
   declaration to be ignored.

  <p class=note>Note: non-rectangular and disconnected regions may be
   permitted in a future update of CSS.

  <p>Rows with fewer columns than other rows are implicitly padded with
   periods (“.”).

  <p>Each slot (letter or “*”) acts as a block element for its contents.

  <p>If the value is &lsquo;<code class=css>none</code>&rsquo;, then no
   explicit slots are defined. If the element is a <a
   href="#grid-element."><em>grid element,</em></a> then the element instead
   has an <dfn id=implicit-template>implicit template</dfn> consisting of a
   single &lsquo;<code class=css>*</code>&rsquo; slot.

  <p class=note>Note that an element is a grid element in this case if
   &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; and &lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; are not
   both &lsquo;<code class=css>auto</code>&rsquo;.

  <div class=example>
   <p>For example, the following two sets of style rules are equivalent:

   <pre>DIV {
  grid-template: none;
  grid-rows: 10em 10em 10em;
  grid=columns: * * * * }
</pre>

   <p>and

   <pre>DIV {
  grid-template: "****" "****" "****";
  grid-rows: 10em 10em 10em;
  grid=columns: * * * * }
</pre>
  </div>

  <h3 id=grid-column-sizes><span class=secno>2.2. </span> Specifying the
   widths of columns: &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-columns>grid-columns</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>The &lsquo;<a href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo; property specifies the sizes
   of the columns of a grid.

  <p>Where

  <pre class=prod>
<dfn id=ltcol-widthgt>&lt;col-width&gt;</dfn> = <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <a
   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | auto
<dfn
   id=ltminmaxgt>&lt;minmax&gt;</dfn> = minmax( <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> , <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> )</pre>

  <p class=issue>The definition of minmax isn't correct, it should only
   accepts certain values.

  <p>Each <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> sets the
   width of a column, the first value for the first column, the second for
   the second columns, etc.

  <p>If there are fewer <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values than the <a
   href="#number-of-columns">number of columns</a> in the element, or if the
   value is &lsquo;<code class=css>auto</code>&rsquo;, the missing columns
   widths are all &lsquo;<code class=css>*</code>&rsquo;.

  <p>Each <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> can be
   one of the following:

  <dl>
   <dt><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>

   <dd> An explicit width for that column. Negative values are illegal.

   <dt><var>&lt;fraction&gt;</var>

   <dd> (A non-negative number followed by &lsquo;<code
    class=css>fr</code>&rsquo;.) A fraction of the remaining space, see <a
    href="#fraction-values-fr">Fraction values</a> below.

   <dt>*

   <dd> (Asterisk.) All columns with a width of &lsquo;<code
    class=css>*</code>&rsquo; have the same width.

   <dt><var>&lt;percentage&gt;</var>

   <dd> Expresses a size as a percentage of the element's a-priori content
    width. <span class=issue>When the width of the <a
    href="#grid-element.">grid element</a> is dependent on content, the
    result is undefined.</span>

   <dt>max-content

   <dt>min-content

   <dd> The column's width is determined by its contents. See the <a
    href="#slot-sizes">algorithm</a> below.

   <dt>minmax(<var>p</var>,<var>q</var>)

   <dd> The column's width is constrained to be greater than or equal to
    <var>p</var> and less than or equal to <var>q</var>. <var>p</var> and
    <var>q</var> stand for [ <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> | max-content |
    min-content | * ]. There may be white space around the <var>p</var> and
    <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var> is
    ignored and &lsquo;<code
    class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo; is treated as
    &lsquo;<code class=css>minmax(<var>p</var>,<var>p</var>)</code>&rsquo;.

   <dt>auto

   <dd> Equivalent to &lsquo;<code class=css>minmax(min-content,
    max-content)</code>&rsquo;.
  </dl>
  <!--=================================================================-->

  <h3 id=grid-row-sizes><span class=secno>2.3. </span> Specifying the height
   of rows: &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo;</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-rows>grid-rows</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>The &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; property specifies the heights
   of the rows of a grid.

  <pre class=prod>
<dfn id=ltrow-heightgt>&lt;row-height&gt;</dfn> = <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <a
   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | auto
<dfn
   id=ltminmaxgt0>&lt;minmax&gt;</dfn> = minmax( <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> , <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> )
</pre>

  <p class=issue>The definition of minmax isn't correct, it should only
   accepts certain values.

  <p class=note>Note that the syntax is the same syntax as for &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;

  <p>If there are fewer <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values than the
   <a href="#number-of-rows">number of rows</a> in the element, or if the
   value is &lsquo;<code class=css>auto</code>&rsquo;, the missing row
   heights are all &lsquo;<code class=css>auto</code>&rsquo;.

  <p>Each <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> can be
   one of the following:

  <dl>
   <dt><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>

   <dd> An explicit height for that row. Negative values are illegal.

   <dt><var>&lt;fraction&gt;</var>

   <dd> (A non-negative number followed by &lsquo;<code
    class=css>fr</code>&rsquo;.) A fraction of the remaining space, see <a
    href="#fraction-values-fr">Fraction values</a> below.

   <dt>* (asterisk)

   <dd> All rows with a height of &lsquo;<code class=css>*</code>&rsquo; have
    the same height.

   <dt><var>&lt;percentage&gt;</var>

   <dd> Expresses a size as a percentage of the element's a-priori content
    height.
    <p class=issue>When the height of the <a href="#grid-element.">grid
     element</a> is dependent on content, the result is undefined.

   <dt>max-content

   <dt>min-content

   <dd> The row's height is determined by its contents. See the <a
    href="#slot-sizes">algorithm</a> below.

   <dt>minmax(<var>p</var>,<var>q</var>)

   <dd> The row's height is constrained to be greater than or equal to
    <var>p</var> and less than or equal to <var>q</var>. <var>p</var> and
    <var>q</var> stand for [ <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> | max-content |
    min-content | * ]. There may be white space around the <var>p</var> and
    <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var> is
    ignored and &lsquo;<code
    class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo; is treated as
    &lsquo;<code class=css>minmax(<var>p</var>,<var>p</var>)</code>&rsquo;.

   <dt>auto

   <dd> Equivalent to &lsquo;<code class=css>minmax(min-content,
    max-content)</code>&rsquo;.
  </dl>
  <!--=================================================================-->

  <h3 id=grid-shorthand><span class=secno>2.4. </span> The &lsquo;<a
   href="#grid"><code class=property>grid</code></a>&rsquo; shorthand
   property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid>grid</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | [ [ <a href="#ltstringgt"><var>&lt;string&gt;</var></a> [ /
      <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> ]? ]+ ] <a
      href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>*

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>see individual properties

    <tr>
     <th>Percentages:

     <td>see individual properties

    <tr>
     <th>Computed&nbsp;value:

     <td>see individual properties

    <tr>
     <th>Canonical order:

     <td>N/A
  </table>

  <p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
   property is a shorthand for &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
   href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
   and &lsquo;<a href="#grid-rows"><code
   class=property>grid-rows</code></a>&rsquo; and is equivalent to setting
   those properties as follows:

  <ul>
   <li>&lsquo;<a href="#grid-template0"><code
    class=property>grid-template</code></a>&rsquo; is set to the list of <a
    href="#ltstringgt"><var>&lt;string&gt;</var></a> values.

   <li>&lsquo;<a href="#grid-rows"><code
    class=property>grid-rows</code></a>&rsquo; is set to the list of <a
    href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values, with any
    omitted ones set to &lsquo;<code class=css>auto</code>&rsquo;.

   <li>&lsquo;<a href="#grid-columns"><code
    class=property>grid-columns</code></a>&rsquo; is set to the list of <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values, or to
    &lsquo;<code class=css>auto</code>&rsquo; if there are none.
  </ul>

  <div class=example>
   <p>For example, the rule

   <pre>grid: "abc" "abd"/4em * 10em</pre>

   <p>is the same as

   <pre>
grid-template: "abc" "abd";
grid-rows: auto 4em;
grid-columns: * 10em;
</pre>

   <p>Note the &lsquo;<code class=css>auto</code>&rsquo; keyword that was
    implied in the shorthand, but must be made explicit in the &lsquo;<a
    href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo;
    property.
  </div>

  <div class=issue>
   <!-- The idea to put column sizes first is due to Fantasai:
http://www.w3.org/mid/4F4FF423.1000205@inkedblade.net -->
   
   <p>Does it look better with the column sizes first instead of last? There
    would be no need for a slash:

   <blockquote>
    <p>none | <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>* [ <a
     href="#ltstringgt"><var>&lt;string&gt;</var></a> <a
     href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>? ]+
   </blockquote>

   <p>E.g.:

   <pre>
grid: 5em 1em  *  1em 10em
      "a   .   b   .   c"  2em
      ".   .   .   .   ."  1em
      "d   .   e   .   f"
      ".   .   .   .   ."  1em
      "g   .   h   .   i"  2em
</pre>
  </div>
  <!--=================================================================-->

  <h3 id=default><span class=secno>2.5. </span>Default slots</h3>

  <p>Every <a href="#grid-element.">grid element</a> has a <dfn
   id=default-slot.>default slot.</dfn> If there is an asterisk (“*”) in
   the template, then that slot is the default. If there is no asterisk, then
   the first letter in the template defines the default slot. If there is no
   letter either, then&hellip;

  <p class=issue>&hellip; define where a grid element's content goes if it
   doesn't have any slots at all.

  <div class=example>
   <p>For example, if the template is defined by &lsquo;<code
    class=css>grid-template: "..." "..c" "abb" "abb"</code>&rsquo;, then
    “c” is the default slot.
  </div>

  <p class=note>If the grid has an <a href="#implicit-template"><em>implicit
   template</em></a> (i.e., &lsquo;<a href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo; is &lsquo;<code
   class=css>none</code>&rsquo;), then its single slot is the default slot.

  <p>All content of a grid element that is not inside another flow (i.e., not
   inside a float, not absolutely positioned, etc.) is flowed into the
   default slot. In particular, any text content of the grid element itself
   is in that default flow.

  <div class=example>
   <p>For example, in this document fragment

   <pre>
&lt;DIV STYLE="grid: 'ab*'">
 &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
 This is an
 &lt;EM STYLE="flow: *">emphasized&lt;/EM>
 &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
 sentence.
 &lt;
&lt;/DIV>
</pre>

   <p>The three slots of the grid contain:

   <dl>
    <dt>Slot a

    <dd>The image

    <dt>Slot b

    <dd>The text “(note well!)”

    <dt>Default slot

    <dd>The text “This is an <em>emphasized</em> sentence.”
   </dl>

   <p>(The &lsquo;<a href="#flow0"><code
    class=property>flow</code></a>&rsquo; property is defined below.)
  </div>
  <!--=================================================================-->

  <h3 id=slot-sizes><span class=secno>2.6. </span>Calculating the size of the
   grid</h3>

  <p>For the purpose of the calculations below, each slot (letter or “*”)
   in a grid has four dimensions associated with it, called <var>MINW</var>
   (“minimum width”), <var>PREFW</var> (“preferred width”),
   <var>MINH</var> (“minimum height”) and <var>PREFH</var> (“preferred
   height”). We can think of them as the minimum and preferred dimensions
   of the slot in isolation, i.e., if it wasn't constrained by other slots in
   the same row or column. They are defined as follows:

  <dl>
   <dt><var>MINW</var>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values,
      &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
      values, or any combination of those), then <var>MINW</var> is 0. <span
      class=note>(Note that <a
      href="#ltlengthgt"><var>&lt;length&gt;</var></a> values can be
      specified with &lsquo;<code class=css>calc()</code>&rsquo; as well, see
      [CSS3VALUES]].)</span>

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <var>MINW</var> is
      the <em>block dimension</em> of the slot, plus its horizontal padding,
      border and margin (i.e., any &lsquo;<a href="#margin-left"><code
      class=property>margin-left</code></a>&rsquo;, &lsquo;<a
      href="#margin-right"><code
      class=property>margin-right</code></a>&rsquo;, etc., that is set on it
      by means of the &lsquo;<a href="#slot"><code
      class=css>::slot()</code></a>&rsquo; pseudo-element). Any &lsquo;<code
      class=css>auto</code>&rsquo; margins are counted as 0 in this case.

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>max-content</code>&rsquo;), then <var>MINW</var>
      is the intrinsic preferred width (see <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of the slot plus its
      horizontal margin, border and padding. Any &lsquo;<code
      class=css>auto</code>&rsquo; margins are counted as 0 in this case.

     <li>Otherwise (i.e., the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>min-content</code>&rsquo; or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>min-content</code>&rsquo;, but no &lsquo;<code
      class=css>max-content</code>&rsquo;) <var>MINW</var> is the intrinsic
      minimum width (see <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the slot, plus its
      horizontal padding, border and margin.
    </ul>

   <dt><var>PREFW</var>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values,
      &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
      values, or any combination of those), then <var>PREFW</var> is
      infinite.

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <var>PREFW</var>
      is the <em>block dimension</em> of the slot, plus its horizontal
      padding, border and margin.

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>max-content</code>&rsquo;), then
      <var>PREFW</var> is the intrinsic preferred width (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its horizontal margin, border and padding.

     <li>Otherwise <var>PREFW</var> is the intrinsic minimum width (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its horizontal padding, border and margin.
    </ul>

   <dt><var>MINH</var>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values,
      &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
      values, or any combination of those), then <var>MINH</var> is 0.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then
      <var>MINH</var> is the <em>block dimension</em> of the slot, plus its
      vertical padding, border and margin

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>max-content</code>&rsquo;), then <var>MINH</var>
      is the intrinsic preferred height (see <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of the slot plus its
      vertical margin, border and padding.

     <li>Otherwise <var>MINH</var> is the intrinsic minimum height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its vertical padding, border and margin.
    </ul>

   <dt><var>PREFH</var>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values,
      &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
      values, or any combination of those), then <var>PREFH</var> is
      infinite.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then
      <var>PREFH</var> is the <em>block dimension</em> of the slot, plus its
      vertical padding, border and margin.

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
      &lsquo;<code class=css>minmax()</code>&rsquo; with a first argument of
      &lsquo;<code class=css>max-content</code>&rsquo;), then
      <var>PREFH</var> is the intrinsic preferred height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) of
      the slot plus its vertical margin, border and padding.

     <li>Otherwise <var>PREFH</var> is the intrinsic minimum height (see <a
      href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> of the
      slot, plus its vertical padding, border and margin.
    </ul>
  </dl>

  <div class=example>
   <p>For example, the <var>MINW</var> values of the slots in this grid

   <pre>
grid: "  a  a  .  "
      "  b  .  c  "
       auto * 10em
</pre>

   <p>are as follows:

   <dl>
    <dt>a

    <dd> &lsquo;<code class=css>min-content</code>&rsquo; (because the slot
     spans at least one column with a width specified as &lsquo;<code
     class=css>min-content</code>&rsquo; or &lsquo;<code
     class=css>auto</code>&rsquo;).

    <dt>b

    <dd> &lsquo;<code class=css>min-content</code>&rsquo; (ditto).

    <dt>c

    <dd> 0 (because the slot spans only columns with a width that is
     independent of the content).
   </dl>
  </div>

  <p>The UA must choose the widths and heights of all columns and rows such
   that the following constraints are satisfied.

  <ol><!-- Constraints relating to the element's own width and
   height. These constraints may be dropped if overconstrained -->

   <li>
    <p>If the element has an a-priori known content height, then the sum of
     the heights of all rows must be equal to the element's height.

    <div class=example>
     <p>For example, the two rows in this grid must be 8em each so that the
      total height matches the height of the element:

     <pre>
div {
  height: 16em;
  grid: "a.b"/*<!--*/-->
        "ac."/*<!--*/--> }
</pre>
    </div>

   <li>
    <p>If the grid element has an a-priori known content width, then the sum
     of the widths of all columns must be equal to the element's width.

    <div class=example>
     <p>For example, the three columns in this grid must be 20em each:

     <pre>div {width: 60em; grid: "abc"}</pre>
    </div>
    <!-- Constraints relating to fixed-size rows and columns -->

   <li>Each row with a height specified as a <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> must have exactly that
    height.

   <li>Each column with a width specified as a <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> must have exactly that
    width. <!-- Constraints on rows and column with fractional sizes. -->

   <li>All rows with a height specified as &lsquo;<code
    class=css>*</code>&rsquo; must have the same height.
    <p class=issue>If we have both &lsquo;<code class=css>*</code>&rsquo; and
     &lsquo;<code class=css>fr</code>&rsquo;, then &lsquo;<code
     class=css>*</code>&rsquo; will be defined as &lsquo;<code
     class=css>1fr</code>&rsquo; and we can drop this rule and the next.
     Otherwise either these two rules or the next two must be removed.

   <li>All columns with a width specified as &lsquo;<code
    class=css>*</code>&rsquo; must have the same width.

   <li>For any pair (<var>i</var>,<var>j</var>) of rows whose <a
    href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values
    h<sub>i</sub> and h<sub>j</sub> are both specified in &lsquo;<code
    class=css>fr</code>&rsquo;, the computed heights H<sub>i</sub> and
    H<sub>j</sub> must be such that H<sub>i</sub> * h<sub>j</sub> =
    H<sub>j</sub> * h<sub>i</sub>. (I.e., their heights are proportional to
    their number of &lsquo;<code class=css>fr</code>&rsquo; units.)

   <li>For any pair (<var>i</var>,<var>j</var>) of columns whose <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values
    w<sub>i</sub> and w<sub>j</sub> are both specified in &lsquo;<code
    class=css>fr</code>&rsquo;, the computed width W<sub>i</sub> and
    W<sub>j</sub> must be such that W<sub>i</sub> * w<sub>j</sub> =
    W<sub>j</sub> * W<sub>i</sub>. (I.e., their widths are proportional to
    their number of &lsquo;<code class=css>fr</code>&rsquo; units.)
    <!-- Constraints relating to rows and columns without slots that span
   into other rows or columns, i.e., cases where the size of a slot
   can put an upper limits on the size of a row or column -->
    

   <li>
    <p>Each row that contains slots that span only one row and no slots that
     span more than one row, must not be higher than the largest
     <var>PREFH</var> of all slots in the row plus the amount needed to
     vertically align the <a href="#horizontal-element.">horizontal</a> slots
     that have a &lsquo;<a href="#vertical-align"><code
     class=property>vertical-align</code></a>&rsquo; of &lsquo;<code
     class=css>baseline</code>&rsquo;.

    <div class=example>
     <p>For example, the second row in this grid

     <pre>
grid: "a.c.." / 5em
      "....b" / auto
</pre>

     <p>must not be taller than the height (<span>block dimension</span>) of
      slot b. The first row contains a slot that spans two rows (slot a), so
      this rule does not apply to that row.
    </div>

   <li>
    <p>Each column that contains slots that span only one column and no slots
     that span more than one column, must not be wider than the largest
     <var>PREFW</var> of all slots in the column plus the amount needed to
     align the <a href="#vertical-element">vertical</a> slots that have a
     &lsquo;<a href="#vertical-align"><code
     class=property>vertical-align</code></a>&rsquo; of &lsquo;<code
     class=css>baseline</code>&rsquo;.

    <div class=example>
     <p>For example, in this grid

     <pre>
grid: "ac"
      "ab"
      auto *
</pre>

     <p>the first column must not be wider than the <var>PREFW</var> of slot
      a. Both slots in the second column have an infinite <var>PREFW</var>,
      so this rule effectively puts no constraint on that column.
    </div>
    <!-- Constraints on slots, only to set lower limits.  -->

   <li>Each slot must be at least as wide as its <var>MINW</var>.

   <li>Each slot must be at least as high as its <var>MINH</var>.
  </ol>

  <p>If it is impossible to choose such widths and heights, then try without
   constraint 1. If it is still impossible, try without constraint 2 instead.
   And, finally, try with both 1 and 2 dropped.

  <div class=example>
   <p>For example, the sum of the row heights in this example can never be
    the same as the height of the element:

   <pre>
div {
  height: 20em;
  grid: "a b c" / 7em
        "a . c" / 7em }
</pre>

   <p>The first constraint is therefore ignored, the rows are 7em each and
    6em of space below the grid remains empty.
  </div>

  <p>If there are multiple solutions, and constraint 1 was dropped or did not
   apply, then the sizes must additionally be chosen such that the sum of the
   heights of the rows is minimized.

  <p>If there are still multiple solutions, and constraint 2 was dropped or
   did not apply, then the sizes must additionally be chosen such that the
   sum of the widths of the columns is minimized.

  <p class=note>The calculation is intended to be symmetric in width and
   height (except for the case when both width and height are fixed and the
   grid is over-constrained, when a solution that ignores the height is tried
   before trying one that ignores the width).

  <div class=example>
   <p>For example, there would be multiple solutions for this grid:

   <pre>
&lt;DIV STYLE="float: left; grid: 'a.b'">
 &lt;P STYLE="flow: a">Two words
 &lt;P STYLE="flow: b">Only three words
&lt;/DIV>
</pre>

   <p>The columns must have equal width, but there is no other constraint on
    the width. They could be narrow:

   <blockquote>
    <p><code class=visible style="display: inline-block">Two  <br>
     words<br>
          </code><code class=visible
     style="display: inline-block">     <br>
          <br>
          </code><code class=visible
     style="display: inline-block">Only <br>
     three<br>
     words</code>
   </blockquote>

   <p>or wider:

   <blockquote>
    <p><code class=visible
     style="display: inline-block">Two words       </code><code
     class=visible
     style="display: inline-block">                </code><code
     class=visible style="display: inline-block">Only three words</code>
   </blockquote>

   <p>or even wider still, e.g.:

   <blockquote>
    <p><code class=visible
     style="display: inline-block">Two words          </code><code
     class=visible
     style="display: inline-block">                   </code><code
     class=visible
     style="display: inline-block">Only three words   </code>
   </blockquote>

   <p>The rule to minimize height excludes the first, narrow solution. The
    rule to minimize width excludes the third and all wider solutions. So the
    second layout, the narrowest that has all words on one line, is the
    correct one.

   <p>(This example assumes the width of the floating DIV's containing block
    is large enough. The default width of a float is actually &lsquo;<code
    class=css>fit-content</code>&rsquo;, and thus if the containing block is
    too narrow, the result will be narrower, too, because the calculation
    will have to be redone using that width as the a-priori width for the
    DIV.)
  </div>

  <p class=note>The width isn't known a-priori, if, e.g., &lsquo;<a
   href="#width"><code class=property>width</code></a>&rsquo; is &lsquo;<code
   class=css>auto</code>&rsquo; and the element is floating, absolutely
   positioned, inline-block or a child of a block with vertical writing mode.
   

  <p>An extra step may be necessary in paged media if a page break occurs
   inside a template (only in the case of an <a
   href="#element-based-template."><em>element-based template,</em></a> see
   <a href="#element-based-page-break">below</a>). If the template, after
   computing the width and height, is too big to fit on the current page, and
   if a suitable break point exists, the part of the template after that
   break point is put on the next page. The width of the containing block on
   that page may be different if that page has different margins from the
   current page (see <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>) and thus the width and
   height of that part of the template must be recalculated in the new
   context.

  <p class=note>Note that the widths of the columns can be completely
   determined before laying out any of the contents as long as there are no
   columns with a <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>
   of &lsquo;<code class=css>min-content</code>&rsquo; or &lsquo;<code
   class=css>max-content</code>&rsquo;.

  <p class=issue>Do we define restrictions or approximations for slots that
   are part of a <a href="#chain."><em>chain</em></a> to avoid complicated
   optimization algorithms?

  <p class=note>Note: In a future update of CSS, rows might get a property to
   specify how the height of that row is adjusted in case the above
   calculation yields a template that is less tall than the element itself.

  <p>The height of a slot is measured as if the slot had one <dfn
   id=anonymous-block title="anonymous block of a slot">anonymous block</dfn>
   as a child that contains all the slot's contents and the anonymous block
   is a <em>flow root</em> (see <a href="#CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>).

  <div class=example>
   <p>This example divides the window in three rows and three columns,
    separated by 1em of white space. The middle row and the middle column are
    flexible, the others are fixed at a specific size. The first column is
    5em wide, the last one 10em.

   <pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    grid: "a   .   b   .   c"  /2em
          ".   .   .   .   ."  /1em
          "d   .   e   .   f"
          ".   .   .   .   ."  /1em
          "g   .   h   .   i"  /2em
          5em 1em  *  1em 10em}
  #logo {flow: a}
  #motto {flow: b}
  #date {flow: c}
  #main {flow: e}
  #adv {flow: f}
  #copy {flow: g}
  #about {flow: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...
</pre>
  </div>

  <p class=issue>[Add example with three columns, first two as narrow as
   possible, third one taking up all remaining space.]
   <!--=================================================================-->

  <h2 id=positioning><span class=secno>3. </span>Putting content into a grid
   element</h2>

  <p><em>This section until the next subsection is not normative.</em>

  <p>Grids can be used in two different ways to position content. The first
   way is to flow content into slots (either into explicit slots identified
   by letters, or the default slot “*”). Each slot is an individual flow
   root (“establishes a block formatting context” in the terminology of
   CSS level 2), very much like a table cell.

  <p>The second way is to absolutely position elements using four <a
   href="#grid-line"><em>grid lines</em></a> to specify the positions of the
   four margin edges of the element. Like other positioned elements <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, these elements
   can overlap each other and the &lsquo;<a href="#z-index"><code
   class=property>z-index</code></a>&rsquo; property applies to them.
   <!--=================================================================-->

  <h3 id=flow><span class=secno>3.1. </span>Flowing content into slots:
   &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;</h3>

  <p>The &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;
   property adds an element to a slot.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flow0>flow</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <var>&lt;identifier&gt;</var> | &lsquo;<code
      class=css>*</code>&rsquo; | same

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with &lsquo;<a href="#position"><code
      class=property>position</code></a>&rsquo; equal to &lsquo;<code
      class=css>static</code>&rsquo; or &lsquo;<code
      class=css>relative</code>&rsquo;

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>If the value is not &lsquo;<code class=css>auto</code>&rsquo;, the
   element is added to the flow of the given slot, instead of to the flow of
   its parent.

  <p>If the element has no <a href="#grid-ancestor">grid ancestor</a>, or
   that grid ancestor has no slot of the given name, the property is treated
   as if it were &lsquo;<code class=css>auto</code>&rsquo;.

  <p>A value of &lsquo;<code class=css>same</code>&rsquo; means the element
   is put into the same slot as the nearest preceding element in document
   order that (1) has the same <a href="#grid-ancestor">grid ancestor</a>,
   (2) to which the &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo; property applies and (3) whose
   &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;
   property is not &lsquo;<code class=css>auto</code>&rsquo;.

  <div class=issue>
   <p>If the letter refers to a slot that doesn't exist in the element's <a
    href="#grid-ancestor"><em>grid ancestor</em></a> (or there is no grid
    ancestor) there are several possibilities:

   <ol>
    <li>The element is not positioned (i.e., it is positioned in the current
     flow).

    <li>The letter is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is not positioned.

    <li>The element is positioned in the default slot (i.e., as if &lsquo;<a
     href="#flow0"><code class=css>flow: *</code></a>&rsquo; had been
     specified); or not positioned at all, in case there is no grid ancestor.
     

    <li>The letter is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is positioned in the default slot.
   </ol>
  </div>

  <p>All content flowed into the same slot, whether explicitly with &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; or implicitly by
   flowing into the default slot, forms a single flow, with content in
   document order. The slot establishes a block formatting context and
   becomes the <dfn id=containing-block>containing block</dfn> of the
   resulting content flow. The boxes of elements flowed into the same slot
   explicitly (by means of &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo;) are each others siblings in the
   slot.

  <p>The content flowed into a slot does not inherit properties from the
   slot.

  <div class=example>
   <p>For example, the style sheet

   <pre>
BODY {grid: "a." ".b"}
.paris {flow: a}
.london {flow: b}
</pre>

   <p>with this document

   <pre>
&lt;DIV CLASS=london>
 &lt;P>The...
 &lt;DIV CLASS=paris>
  &lt;P>The...
  &lt;DIV CLASS=london>
   &lt;P>The...
  &lt;/DIV>
 &lt;/DIV>
&lt;/DIV>
</pre>

   <p>causes the second and third DIVs to be taken out of their parents. The
    second DIV becomes the first child of slot a (i.e., of the pseudo-element
    called &lsquo;<code class=css>::slot(a)</code>&rsquo;). The third DIV
    becomes the sibling of the first DIV, because both are added to slot b
    independently.
  </div>

  <p class=note>Note that &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo; applies to floating elements: they
   are floated relative to their containing block, and if their &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; property
   indicates a slot in a grid, that slot is their containing block. See also
   <a href="#float">“Floating elements inside templates”</a> below.

  <div class=example>
   <p>A common markup in HTML for illustrations with captions is as follows:

   <pre>
&lt;div class=figure>
 &lt;p>&lt;img src="paul.jpg" alt="...">
 &lt;p class=caption>A pond in a playground in Amsterdam
&lt;/div>
</pre>

   <p>The caption can be put above the image by using a template as follows:

   <pre>
div.figure {grid: "aaa"
                  ".b."
                  * min-content *}
div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>

   <p>The caption can be wider than the image and the image will be centered.
    

   <p>When the figure is floating, it is probably better to not let the
    caption become wider than the image (unless the caption cannot be made
    narrow enough):

   <pre>
div.figure {float: right; grid: "a" "b" min-content}
div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>
  </div>

  <div class=example>
   <p>In this example, a form is laid out on a grid, with two labels and two
    input boxes and a submit and a reset button:

   <pre>
form {
  border: thin solid;
  grid: "aaaa.bbbb"
        "........."/1em
        "cccc.dddd"
        "........."/1em
        "...ee..ff" }
label[for=minv] { flow: a }
input#minv { flow: b; display: block }
label[for=maxv] { flow: c }
input#maxv { flow: d; display: block }
input[type=submit] { flow: e; display: block }
input[type=reset] { flow: f; display: block }
</pre>

   <p>Here is the fragment of HTML that the style is applied to:

   <pre>
&lt;form action="./"&gt;
  &lt;label for=minv&gt;Enter minimum value:&lt;/label&gt;
  &lt;input id=minv name=minv&gt;
  &lt;label for=maxv&gt;Enter maximum value:&lt;/label&gt;
  &lt;input id=maxv name=maxv&gt;
  &lt;input type=submit value="OK"&gt;
  &lt;input type=reset value="Reset"&gt;
&lt;/form&gt;
</pre>

   <p>The addition of &lsquo;<code class=css>display: block</code>&rsquo;
    causes the form controls to use the width computation of blocks, in other
    words: they will be as wide as their containing block, which in this case
    means that they will be as wide as the slot they are assigned to. Without
    it, they would be inline elements and just be left-aligned in their
    slots.

   <div class=figure>
    <p><img alt="Image simulating the layout of the example"
     longdesc=form.desc src=form.png>

    <p class=caption>Possible rendering of the example.
   </div>
  </div>

  <div class=example>
   <p>This example shows that templates can be nested. The body has two
    columns. The #content element that goes into the second column has itself
    another template, into which the various “modules” are placed.

   <div class=figure>
    <p><img alt="[Screendump with nested templates]" longdesc=table5.desc
     src=table5.png>

    <p class=caption>Possible rendering of the nested templates. (The borders
     are added for clarity, they don't occur in the style rules below. The
     red border is the inner template.)
   </div>

   <p>For clarity, the inner template uses different letters for the slots
    than the outer template. This is not required.

   <pre>
&lt;style type="text/css">
body {
     grid: "a   b"
           10em *;
}
#nav {
     flow: a;
}
#content {
     flow: b;
     grid: "c   .   d   .   e   "
           ".   .   .   .   .   "/1em
           ".   .   f   .   .   "
            *  1em  *  1em  *;
}
.module.news {
     flow: c;
}
.module.sports {
     flow: d;
}
.module.personal {
     flow: e;
}
#foot {
     flow: f;
}
&lt;/style>
&lt;body>
&lt;ul id="nav">
     &lt;li>navigation&lt;/li>
&lt;/ul>
&lt;div id="content">
    &lt;div class="module news">
         &lt;h3>Weather&lt;/h3>
         &lt;p>There will be weather&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Football&lt;/h3>
         &lt;p>People like football.&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Chess&lt;/h3>
         &lt;p>There was a brawl at the chess tournament&lt;/p>
    &lt;/div>
    &lt;div class="module personal">
         &lt;h3>Your Horoscope&lt;/h3>
         &lt;p>You're going to die (eventually).&lt;/p>
    &lt;/div>
    &lt;p id="foot">Copyright some folks&lt;/p>
&lt;/div>

&lt;/body>
</pre>
  </div>

  <div class=example>
   <p>This example shows the use of &lsquo;<code class=css>same</code>&rsquo;
    to put <code>DD</code> elements in the same slot as the preceding
    <code>DT</code>.

   <pre>
...
DL {grid: "a.b.c"  * 2em * 2em *}
DT.mineral {flow: a}
DT.animal {flow: b}
DT.plant {flow: c}
DD {flow: same; margin-left: 1em}
...
<b>&lt;DL></b>
 <b>&lt;DT class=animal></b>falcon
 <b>&lt;DD></b>This bird of prey...
 <b>&lt;DT class=animal></b>rabbit
 <b>&lt;DD></b>Local restaurants...
 <b>&lt;DT class=mineral></b>granite
 <b>&lt;DD></b>This rock occurs...
 <b>&lt;DT class=plant></b>olive
 <b>&lt;DD></b>The fruit of...
 <b>&lt;DT class=mineral></b>limestone
 <b>&lt;DD></b>A rock composed of...
 <b>&lt;DT class=plant></b>pine
 <b>&lt;DD></b>The western half...
<b>&lt;/DL></b>
</pre>

   <div class=figure>
    <p><img alt=screendump longdesc=granite.desc src=granite.png>

    <p class=caption>Possible rendering of the <code>DL</code> list, with
     items sorted into three columns.
   </div>
  </div>

  <p class=issue>An alternative to &lsquo;<code class=css>same</code>&rsquo;
   may be to create selectors with regular-expression-like capabilities:
   &lsquo;<code class=css>DT.plant + DD* + DD {flow: c}</code>&rsquo; selects
   a DD that follows zero or more DDs that follow DT.plant.

  <p class=issue>Does a percentage &lsquo;<a href="#height"><code
   class=property>height</code></a>&rsquo; work on an element that is flowed
   into a slot? If the grid template assigns a fixed height to the slot, it
   is obvious what a percentage means, but if the slot's height is
   &lsquo;<code class=css>max-content' and an element in the slot has
   'height: 110%', there is a conflict&hellip;
   <!--=================================================================-->
   </code>

  <h3 id=absolute-positioning-using-a-grid-grid-p><span class=secno>3.2.
   </span>Absolute positioning using a grid: 'grid-position-x' and
   'grid-position-y'</h3>

  <p class=issue>Trying to combine 'grid-row/column' and
   'grid-row/column-span', because they should not cascade independently. (If
   one style rule tries to place by start/end lines, and another tries to
   place by span, the result of the cascade will be a mess.)

  <p>The 'grid-position-x' and 'grid-position-y' properties can absolutely
   position an element relative to a grid.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-position-x>grid-position-x</dfn>, <dfn
      id=grid-position-y>grid-position-y</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | [ <var>&lt;identifier&gt;</var> |
      <var>&lt;grid-line&gt;</var> ] [ + <var>&lt;span&gt;</var> | - [
      <var>&lt;identifier&gt;</var> | <var>&lt;grid-line&gt;</var> ] ]?

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with 'position: absolute'

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Where

  <pre class=prod>
<var>&lt;grid-line&gt;</var> = <var>&lt;integer&gt;</var> | same | next
<var>&lt;span&gt;</var> = <var>&lt;integer&gt;</var>
</pre>

  <p>If the value is &rsquo;auto'&lsquo;<code class=css>, the element is
   positioned with </code>&rsquo;top' and &lsquo;<a href="#bottom"><code
   class=property>bottom</code></a>&rsquo; (for &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo;) or &lsquo;<a
   href="#left"><code class=property>left</code></a>&rsquo; and &lsquo;<a
   href="#right"><code class=property>right</code></a>&rsquo; (for &lsquo;<a
   href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo;, see <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. The other values mean that
   the computed values of &lsquo;<a href="#top"><code
   class=property>top</code></a>&rsquo;/&lsquo;<a href="#bottom"><code
   class=property>bottom</code></a>&rsquo; or &lsquo;<a href="#left"><code
   class=property>left</code></a>&rsquo;/&lsquo;<a href="#right"><code
   class=property>right</code></a>&rsquo; are ignored and their used values
   are set as defined below.

  <p>If the element has no <a href="#grid-ancestor">grid ancestor,</a> the
   value is interpreted as if it were &lsquo;<code
   class=css>auto</code>&rsquo;.

  <p>An <var>&lt;identifier&gt;</var> refers to a <a href="#slot">slot</a> in
   the <a href="#grid-ancestor">grid ancestor.</a>

  <p>If an <var>&lt;identifier&gt;</var> refers to a non-existent slot, the
   whole value is interpreted as if it were &lsquo;<code
   class=css>auto</code>&rsquo;.

  <p>If <var>&lt;grid-line&gt;</var> is an integer, it refers to a <dfn
   id=grid-line>grid line,</dfn> i.e., the horizontal line at the edge of a
   row or the vertical line at the edge of a column. The top of the first row
   of a grid template is the horizontal grid line with number 1, the top of
   the second row is 2, etc. up to <var>N</var>+1 for a grid template with
   <var>N</var> rows. Similarly, the vertical grid lines are numbered 1 to
   <var>M</var>+1 for a grid template with <var>M</var> columns.

  <p>It is an error if the integer is &le; 0.

  <p>The keyword &lsquo;<code class=css>same</code>&rsquo; stands for the
   grid line specified by the nearest preceding element in document order
   with the same <a href="#grid-ancestor">grid ancestor</a> to which
   &lsquo;<a href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo; or &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo; applied. If there is no
   such element, or if it specified &lsquo;<code
   class=css>auto</code>&rsquo;, then &lsquo;<code
   class=css>same</code>&rsquo; stands for &lsquo;<code
   class=css>1</code>&rsquo;.

  <p>The keyword &lsquo;<code class=css>next</code>&rsquo; stands for next
   the grid line after the one specified by the nearest preceding element in
   document order with the same <a href="#grid-ancestor">grid ancestor</a> to
   which &lsquo;<a href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo; or &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo; applied. If there is no
   such element, or if it specified &lsquo;<code
   class=css>auto</code>&rsquo;, then &lsquo;<code
   class=css>next</code>&rsquo; stands for &lsquo;<code
   class=css>1</code>&rsquo;.

  <p>A <var>&lt;span&gt;</var> is a non-negative integer. It indicates the
   number of rows or columns the element spans, as defined below.

  <p>It is an error if the span is &lt; 0.

  <p>The values are of the following forms:

  <dl>
   <dt><var>&lt;identifier&gt;</var>

   <dd> Equivalent to &lsquo;<code class=css><var>&lt;identifier&gt;</var> -
    <var>&lt;identifier&gt;</var></code>&rsquo; (twice the same identifier).

   <dt><var>&lt;grid-line&gt;</var>

   <dd> Equivalent to &lsquo;<code class=css><var>&lt;grid-line&gt;</var> +
    1</code>&rsquo; (i.e., a position and a span of 1).

   <dt><var>&lt;identifier&gt;</var> - <var>&lt;identifier&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the top (or left) margin edge of the first slot. &lsquo;<a
    href="#bottom"><code class=property>Bottom</code></a>&rsquo; (or
    &lsquo;<a href="#right"><code class=property>right</code></a>&rsquo;) is
    set to the bottom (or right) margin edge of the second slot.

   <dt><var>&lt;identifier&gt;</var> - <var>&lt;grid-line&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the top (or left) margin edge of the first slot. &lsquo;<a
    href="#bottom"><code class=property>Bottom</code></a>&rsquo; (or
    &lsquo;<a href="#right"><code class=property>right</code></a>&rsquo;) is
    set to the given grid line.

   <dt><var>&lt;grid-line&gt;</var> - <var>&lt;identifier&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the indicated grid line. &lsquo;<a href="#bottom"><code
    class=property>Bottom</code></a>&rsquo; (or &lsquo;<a href="#right"><code
    class=property>right</code></a>&rsquo;) is set to the bottom (or right)
    margin edge of the second slot.

   <dt><var>&lt;grid-line&gt;</var> - <var>&lt;grid-line&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the grid line indicated by the first number. &lsquo;<a
    href="#bottom"><code class=property>Bottom</code></a>&rsquo; (or
    &lsquo;<a href="#right"><code class=property>right</code></a>&rsquo;) is
    set to grid line given by the second number.

   <dt><var>&lt;identifier&gt;</var> + <var>&lt;span&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the top (or left) margin edge of the first slot. The
    <var>&lt;span&gt;</var> specifies the number of rows (or columns)
    spanned, i.e., &lsquo;<a href="#bottom"><code
    class=property>bottom</code></a>&rsquo; (or &lsquo;<a href="#right"><code
    class=property>right</code></a>&rsquo;) is set to the grid line
    <var>&lt;span&gt;</var> rows below (or columns to the right) of that
    edge.

   <dt><var>&lt;grid-line&gt;</var> + <var>&lt;span&gt;</var>

   <dd> &lsquo;<a href="#top"><code class=property>Top</code></a>&rsquo; (or
    &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;) is
    set to the grid line given by the first number The second number
    specifies the number of rows (or columns) spanned, i.e., &lsquo;<a
    href="#bottom"><code class=property>bottom</code></a>&rsquo; (or
    &lsquo;<a href="#right"><code class=property>right</code></a>&rsquo;) is
    set to the grid line <var>&lt;span&gt;</var> rows below (or columns to
    the right) of the first.
  </dl>

  <div class=example>
   <p>For example, these rules

   <pre>
DIV {grid: "ab"
           "cd"}
P {position: absolute; grid-position-x: d; grid-position-y: a}
</pre>

   <p>mean that any P spans the same rows as slot a and spans the same
    columns as slot d. In this case, that means it coincides with slot b. All
    of the following are thus equivalent:

   <pre>
P {position: absolute; grid-position-x: b; grid-position-y: b}
P {position: absolute; grid-position-x: b + 1; grid-position-y: b + 1}
P {position: absolute; grid-position-x: b - b; grid-position-y: a - a}
P {position: absolute; grid-position-x: 2 + 1; grid-position-y: 1 - 2}
P {position: absolute; grid-position-x: 2; grid-position-y: 1}
</pre>
  </div>

  <p class=issue>Use negative number to count from the right/bottom?

  <p class=issue>This needs to be worked into the constraints for the
   calculation of the grid size, so that these absolutely positioned elements
   also contribute to the calculation of &lsquo;<code
   class=css>min-content</code>&rsquo; and &lsquo;<code
   class=css>max-content</code>&rsquo;.

  <p>When using <var>&lt;grid-line&gt;</var> or <var>&lt;span&gt;</var> (but
   not when using <var>&lt;identifier&gt;</var>), it is possible to refer to
   grid lines that do not exist in the grid declared with &lsquo;<a
   href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;/&lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo;. In
   such a case, the grid is automatically extended with the necessary rows or
   columns. The sequence of sizes given by &lsquo;<a
   href="#grid-columns"><code
   class=property>grid-columns</code></a>&rsquo;/&lsquo;<a
   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; is
   repeated as often as necessary to create exactly the required number of
   rows and column.

  <div class=example>
   <p>For example, you can transpose a table such as

   <pre>
&lt;TABLE>
 &lt;TR>&lt;TD>A1 &lt;TD>A2 &lt;TD>A3
 &lt;TR>&lt;TD>B1 &lt;TD>B2 &lt;TD>B3
 ...
 &lt;TR>&lt;TD>K1 &lt;TD>K2 &lt;TD>K3
 ...
&lt;/TABLE>
</pre>

   <p>to display it somewhat like this

   <pre>
A1 B1... K1...
A2 B2... K2...
A3 B3... K3...
</pre>

   <p>with style rules like this:

   <pre>
TABLE {grid-columns: auto; grid-rows: auto}
TD:first-child {grid-position-x: next; grid-position-y: 1}
TD {grid-position-x: same; grid-position-y: next}
</pre>
  </div>

  <p class=issue><a
   href="http://www.w3.org/Style/CSS/Tracker/issues/201">ISSUE-201:</a> Terra
   Informatica's <a
   href="http://www.terrainformatica.com/htmlayout/">HTMLayout</a> program
   proposes an interesting shortcut: if a slot's name is a number (instead of
   a letter), it refers directly to the child with that number. That child is
   absolutely positioned on top of that slot and doesn't need &lsquo;<a
   href="#position"><code class=property>position</code></a>&rsquo;,
   &lsquo;<a href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo; or &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo; to be set. See <a
   href="http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm">the
   documentation by Andrew Fedoniouk and Ivan Goroun.</a> E.g., <code>&lt;ul
   style="grid: '2 1'">&lt;li>one &lt;li>two &lt;/ul></code> puts “two”
   on the left and “one” on the right. (Note that this requires that the
   names of slots are separated by spaces.) It is thus also a shortcut for
   some applications of <a
   href="http://www.w3.org/TR/css3-flexbox/#flex-order">&lsquo;<code
   class=property>flex-order</code>&rsquo;.</a>
   <!--=================================================================-->

  <h3 id=grid-position><span class=secno>3.3. </span> The &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; shorthand property</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-position0>grid-position</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td><var>&lt;grid-position-x&gt;</var> [ /
      <var>&lt;grid-position-y&gt;</var> ]?

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements with &lsquo;<code class=css>position:
      absolute</code>&rsquo;

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed&nbsp;value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>This is a shorthand for &lsquo;<a href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo; and &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo;. If
   <var>&lt;grid-position-y&gt;</var> is omitted, it is the same as
   <var>&lt;grid-position-x&gt;</var>.

  <div class=example>
   <p>For example, these rules

   <pre>
DIV {grid: "ab"
           "cd"}
P {position: absolute; grid-position: d / a}
</pre>

   <p>position any P to coincide with slot b. All of the following are thus
    equivalent:

   <pre>
P {position: absolute; grid-position: b / b}
P {position: absolute; grid-position: b + 1 / b + 1}
P {position: absolute; grid-position: b - b / a - a}
P {position: absolute; grid-position: 2 + 1 / 1 - 2}
P {position: absolute; grid-position: 2 / 1}
P {position: absolute; grid-position: b}
</pre>
  </div>
  <!--=================================================================-->

  <h2 id=slot-pseudo><span class=secno>4. </span>Styling slots: the &lsquo;<a
   href="#slot"><code class=css>::slot()</code></a>&rsquo; pseudo-element</h2>

  <p>The slots of a <a href="#grid-element."><em>grid element</em></a> can be
   individually addressed with the <dfn id=slot-pseudo-element.>&lsquo;<code
   class=css>::slot()</code>&rsquo; pseudo-element.</dfn>

  <div class=example>
   <p>For example, the following sets the background and vertical alignment
    of some of the slots in a template:

   <pre>
body { grid: "aaa"
             "bcd" }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
</pre>
  </div>

  <p>Only the following properties apply to the &lsquo;<a href="#slot"><code
   class=css>slot()</code></a>&rsquo; pseudo-element.

  <ul>
   <li>background properties

   <li>&lsquo;<a href="#vertical-align"><code
    class=property>vertical-align</code></a>&rsquo; (see <a
    href="#vertical-alignment">“vertical alignment”</a> below)

   <li>&lsquo;<a href="#overflow"><code
    class=property>overflow</code></a>&rsquo; (see the sections on <a
    href="#vertical-alignment">vertical alignment</a> and <a
    href="#paged">paged media</a> below)

   <li>&lsquo;<a href="#writing-mode"><code
    class=property>writing-mode</code></a>&rsquo;

   <li>&lsquo;<a href="#direction"><code
    class=property>direction</code></a>&rsquo;

   <li>&lsquo;<a href="#box-shadow"><code
    class=property>box-shadow</code></a>&rsquo;

   <li>border properties

   <li>padding properties

   <li>margin properties

   <li>&lsquo;<a href="#box-decoration-break"><code
    class=property>box-decoration-break</code></a>&rsquo;

   <li>column properties
  </ul>

  <p class=issue>Should &lsquo;<a href="#content"><code
   class=property>content</code></a>&rsquo; be allowed? or should instead
   &lsquo;<code class=css>::slot(a)::before</code>&rsquo; be possible (and
   ditto with &lsquo;<code class=css>::after</code>&rsquo;)? The content
   would be at the start of the flow, before any elements flowed into the
   slot and even before the <a href="#grid-element."
   title="grid element">grid element's</a> &lsquo;<code
   class=css>:before</code>&rsquo; pseudo-element, if the slot is the <a
   href="#default-slot.">default slot.</a> If content applies, then most
   other properties apply, too, to set the style of that content: color,
   font, text-decoration&hellip;

  <p class=issue>Should the &lsquo;<a href="#content"><code
   class=property>content</code></a>&rsquo; property allow &lsquo;<code
   class=css>element()</code>&rsquo; from GCPM? You could then repeat the
   heading of an article at the top of each slot in case the article is split
   over several chained slots or several pages. (See also the <a
   href="#see-page">issue about “continued on.”)</a>

  <p class=issue><a
   href="http://www.w3.org/Style/CSS/Tracker/issues/37">ISSUE-37:</a> Can a
   slot have a border and if so, where is it drawn?

  <p>The background of a slot is drawn immediately on top of the background
   of the element itself. E.g., the background set on &lsquo;<code
   class=css>P::slot(a)</code>&rsquo; is immediately in front of the
   background set on &lsquo;<code class=css>P</code>&rsquo;.

  <p>Margins on slots do not collapse, neither with other slots, nor with
   elements inside the slot.

  <p class=issue>Margins aren't really necessary on slots. You can add
   &lsquo;<code class=css>.</code>&rsquo; cells in the grid template to make
   empty space.
   <!--=================================================================-->

  <div class=level4>
   <h2 id=styling-the-contents-of-slots-fragment><span class=secno>5.
    </span>Styling the contents of slots: &lsquo;<code
    class=css>::fragment()</code>&rsquo;</h2>

   <p>The &lsquo;<code class=css>:fragment(a)</code>&rsquo; pseudo-element
    selects the part of an element that is inside slot a (similar to how
    &lsquo;<code class=css>::first-line</code>&rsquo; selects the part of an
    element that is on the first line).

   <p>Inherited properties&hellip;

   <p>Non-inherited properties&hellip;
  </div>
  <!--=================================================================-->

  <h2 id=rendering-of-grid-elements><span class=secno>6. </span>Rendering of
   grid elements</h2>

  <p>Grid elements influence the stacking order, page breaks, the position of
   floats, etc. of the content inside them.
   <!--=================================================================-->

  <h3 id=vertical-alignment><span class=secno>6.1. </span>Vertical alignment
   of the contents of slots</h3>

  <p>The &lsquo;<a href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo; property of a &lsquo;<a
   href="#slot"><code class=css>::slot()</code></a>&rsquo; pseudo-element can
   be used to align elements vertically in a slot (or horizontally, if the
   slot is <a href="#vertical-element">vertical</a>). The effect is as if the
   <a href="#anonymous-block"><em
   title="anonymous block of a slot">hypothetical anonymous block</em></a>
   that contains the slot's contents is positioned as defined below.

  <p>For the purpose of this section we define the <dfn id=tail-edge>tail
   edge</dfn> and <dfn id=head-edge>head edge</dfn> of a box as a
   writing-mode-dependent edge as follows:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>Value of &lsquo;<a href="#writing-mode"><code
      class=property>writing-mode</code></a>&rsquo;

     <th>Meaning of “head”

     <th>Meaning of “tail”

   <tbody>
    <tr>
     <th>&lsquo;<code class=css>horizontal-tb</code>&rsquo;

     <td>top

     <td>bottom

    <tr>
     <th>&lsquo;<code class=css>vertical-rl</code>&rsquo;

     <td>right

     <td>left

    <tr>
     <th>&lsquo;<code class=css>vertical-lr</code>&rsquo;

     <td>left

     <td>right
  </table>

  <p>E.g., if a box is <a href="#horizontal-element.">horizontal,</a> “head
   edge” means the top edge.

  <dl>
   <dt>bottom

   <dd> The content of the slot is aligned to the <a href="#tail-edge">tail
    edge</a> of the slot: the tail margin edge of the anonymous block
    coincides with the tail margin edge of the slot.

   <dt>middle

   <dd> The content of the slot is centered in the slot: the distance between
    the <a href="#head-edge" title="head edge">head</a> margin edge of the
    anonymous block and the <a href="#head-edge" title="head edge">head</a>
    margin edge of the slot is equal to the distance between the <a
    href="#tail-edge" title="tail edge">tail</a> margin edge of the anonymous
    block and the <a href="#tail-edge" title="tail edge">tail</a> margin edge
    of the slot.
    <p class=note>(Note that if the content overflows the slot, it will
     overflow at both edges.)

   <dt>baseline

   <dd> The anonymous block that encloses the content is placed as far as
    possible in the direction against the <a
    href="#block-flow-direction"><em>block flow direction</em></a> under two
    constraints:
    <ol>
     <li>The <a href="#head-edge" title="head edge">head</a> margin edge of
      the anonymous block may not be beyond the <a href="#head-edge"
      title="head edge">head</a> margin edge of the slot.

     <li>If the content has a relevant first line (see below), then the
      baseline of that line must align with the baselines of the relevant
      first lines in all other slots with the same &lsquo;<a
      href="#writing-mode"><code
      class=property>writing-mode</code></a>&rsquo; and the same &lsquo;<a
      href="#vertical-align"><code
      class=property>vertical-align</code></a>&rsquo; in the same row (if the
      slot is <a href="#horizontal-element.">horizontal</a>) or the same
      column (if the slot is <a href="#vertical-element">vertical</a>). A
      slot has a relevant first line, if the content has a first line
      (ignoring any lines inside floats) and that first line has the same
      &lsquo;<a href="#writing-mode"><code
      class=property>writing-mode</code></a>&rsquo; as the slot itself.
    </ol>

    <p class=note>For example, for a <a
     href="#horizontal-element.">horizontal</a> slot, this means that the
     first baseline must be aligned with the first baselines of all other
     horizontal slots in the row that also have &lsquo;<code
     class=css>vertical-align: baseline</code>&rsquo;.

   <dt><var>&lt;percentage&gt;</var>

   <dd> &lsquo;<code class=css>0%</code>&rsquo; means the same as &lsquo;<a
    href="#bottom"><code class=css>bottom</code></a>&rsquo;, &lsquo;<code
    class=css>100%</code>&rsquo; means the same as &lsquo;<a
    href="#top"><code class=css>top</code></a>&rsquo;, other values are
    linear interpolations of these. Negative values and values over 100% are
    interpreted as 0% and 100% respectively.
    <p class=note>Note that 100% minus the percentage corresponds to the
     initial position of the scrolling mechanism (if any) in case the content
     overflows.
  </dl>

  <p>For all other values, the content is aligned as for &lsquo;<code
   class=css>baseline</code>&rsquo;.
   <!--=================================================================-->

  <h3 id=paged><span class=secno>6.2. </span>Breaking grid elements across
   pages or columns</h3>

  <p><a href="#grid-element.">Grid elements</a> may be broken across pages,
   columns or similar regions (including chained slots of another grid
   element), subject to the &lsquo;<a href="#break-before0"><code
   class=property>break-before</code></a>&rsquo;, &lsquo;<a
   href="#break-after0"><code class=property>break-after</code></a>&rsquo;
   and &lsquo;<a href="#break-inside0"><code
   class=property>break-inside</code></a>&rsquo; properties. In addition to
   the break points listed in the Fragmentation module <a href="#CSS3-BREAK"
   rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>, a page break may
   occur between two rows in a template, if there is a possible break point
   at the same height or higher in all slots that span those two rows; and a
   page break may occur inside a row if there is a possible break point in
   all slots in that row.

  <p class=issue>Try to be more precise?

  <p>In the terminology of <a href="#CSS3-BREAK"
   rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>, a slot is a <a
   href="#fragmenter"><em>fragmenter</em></a> of type &lsquo;<code
   class=css>region</code>&rsquo;.

  <p>A forced break on an element in a slot causes the rest of the flow of
   that slot to continue in another page, column or slot (depending on the
   type of break). The following cases are special:

  <ul>
   <li>
    <p>A forced page break causes all elements after the break (in document
     order) to be on a new page. On which subsequent page they fall depends
     on any page templates: there may not be a slot with the right name on
     the next page.

   <li>
    <p>A forced column break only has effect if the element's multicol
     ancestor is a descendant (is “inside”) the element's grid ancestor.
  </ul>

  <div class=example>
   <p>For example, this document fragment has a column element inside a grid
    element. Column breaks affect the content of a single slot, but do not
    affect the other slots of the grid element:

   <pre>
&lt;DIV STYLE="grid: 'ab' 'cd'">
 &lt;DIV STYLE="flow: a">
  I'm in slot a.
 &lt;/DIV>
 &lt;DIV STYLE="flow: b; columns: 20em">
  &lt;P>This text is in columns.
  &lt;H2 STYLE="break-before: column">Heading at top of column&lt;/H2>
  &lt;P>...
 &lt;/DIV
&lt;/DIV></pre>
  </div>

  <div class=example>
   <p>For example, this document fragment has a grid element inside a column
    element and thus the column break on the H2 is ignored:

   <pre>
&lt;DIV STYLE="columns: 20em">
 &lt;DIV STYLE="grid: 'ab' 'cd'">
  &lt;P>I'm inside slot a inside some columns.
  &lt;H2 STYLE="break-before: column">No break&lt;/H2>
  &lt;P>...
 &lt;/DIV>
&lt;/DIV></pre>
  </div>

  <div class="example level4">
   <p>A slide presentation can be made with a template for each page (i.e.,
    slide) and forced page break between the slides:

   <pre>
@page	{ grid: "a" / 5em
	        "@" / *
	        "b" / auto }
h1	{ page-break-before: always;
	  flow: a }
p.note	{ flow: b }
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>Topic one
<b>&lt;/ul></b>
<b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>More topics
<b>&lt;/ul></b>
<b>&lt;p class=note></b>Note the note
</pre>
  </div>

  <div class=example>
   <p>The document in the example above doesn't have an element that
    corresponds to a slide; a slide simply starts at an H1 and ends before
    the next H1. But if there is a DIV around each slide (as is the case in
    many slide formats in practice), the same effect can also be achieved
    without page-based templates, by using the &lsquo;<code
    class=css>vh</code>&rsquo; unit <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>:

   <pre>
div.slide {height: 100vh; grid: "a"/5em "*" "b"/intrinsic;
    page-break-before: always}
h1 {flow: a}
p.note {flow: b}
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>Topic one
 <b>&lt;/ul></b>
<b>&lt;/div></b>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>More topics
 <b>&lt;/ul></b>
 <b>&lt;p class=note></b>Note the note
<b>&lt;/div></b>
</pre>
  </div>
  <!--=================================================================-->

  <h3 id=stacking-order><span class=secno>6.3. </span>Stacking order</h3>

  <p class=issue>Slots are stacked in the order they are listed in &lsquo;<a
   href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo; (order of their top left
   corners). &lsquo;<a href="#z-index"><code
   class=property>z-index</code></a>&rsquo; applies. The general rules for <a
   href="/TR/CSS21/zindex">stacking contexts</a> <span class=issue>[ref in
   CSS3?]</span> apply.

  <div class=example>
   <p>This example uses &lsquo;<a href="#z-index"><code
    class=property>z-index</code></a>&rsquo; and negative margins to make the
    middle slot partly overlap the other slots:

   <pre>
body { grid: "a.b"
             ".c."
             "d.e";
       height: 240px;
       width: 240px }
::slot(a) { background: #0C0 }
::slot(b) { background: #C00 }
::slot(c) { background: #FD0; margin: -20px; z-index: 1 }
::slot(d) { background: #00C }
::slot(e) { background: #A0A }
</pre>

   <div class=figure>
    <p><img alt="Five colored rectangles" longdesc=overlap.desc
     src=overlap.png>

    <p class=caption>Rendering of the above example.
   </div>
  </div>
  <!--=================================================================-->

  <h3 id=floating-elements-inside-templates><span class=secno>6.4.
   </span>Floating elements inside templates</h3>

  <p>An element may be flowed into a slot and be a floating element at the
   same time. The following cases must be distinguished:

  <ul>
   <li>Page-based floats &ndash; In paged media (see <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>), if the value of
    &lsquo;<a href="#float"><code class=property>float</code></a>&rsquo;
    specifies that the element floats to the top or bottom of the page (in a
    horizontal writing mode) or the left or right of the page (in a vertical
    writing mode), the slot act as the page. (I.e., the element floats to the
    top, bottom, etc. of the slot, not of the page.

   <li>Footnotes &ndash; Likewise, the footnote area for elements with
    &lsquo;<code class=css>float: footnote</code>&rsquo; is at the bottom of
    the slot, not of the page. The @footnote at-rule can position the
    footnote area at other places, such as the top, but always inside the
    slot.

   <li>Normal floats &ndash; In other cases, the element floats normally
    within its <a href="#containing-block">containing block,</a> which in
    this case is its slot in the template.
  </ul>

  <p class=issue>The &lsquo;<code class=css>@footnote</code>&rsquo; at-rule
   from <a href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>
   needs to be extended to apply to slots: &lsquo;<code class=css>@footnote
   :first::slot(a)</code>&rsquo; is the footnote area of slot a on the first
   page.

  <div class=level4>
   <!--=================================================================-->
   <h2 id=page-templates><span class=secno>7. </span> Page-based grid
    templates</h2>

   <p>A template can also be attached to a page, rather than an element. Such
    a template is called a <dfn id=page-based-template>page-based
    template</dfn> as opposed to an <dfn
    id=element-based-template.>element-based template.</dfn>

   <p>The syntax of a page-based template is the same as that of an
    element-based one, but the declaration appears in an &lsquo;<code
    class=css>@page</code>&rsquo; rule.

   <p>In a page-based template, the height and width are typically known
    (defined by the output media and the margin boxes, see <a
    href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>). And
    content that overflows a slot typically is not clipped (or hidden behind
    a scrolling mechanism), but is continued on a subsequent page.

   <p>Because the grid template is not attached to an element but to a page,
    it is not scoped. The slot names are global, although they can be hidden
    to elements that have a grid ancestor that uses the same slot names.

   <p>This modifies the rules for &lsquo;<a href="#flow0"><code
    class=property>flow</code></a>&rsquo; and &lsquo;<a
    href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo;: if these properties refer
    to a slot that is not found in a <a href="#grid-ancestor">grid
    ancestor,</a> they refer instead to a slot in a page template (if there
    is one and it has a slot of that name).

   <p>Similarly, a &lsquo;<a href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo; that refers to grid lines
    by number, when set on an element that has no <a
    href="#grid-ancestor">grid ancestor,</a> refers to grid lines of the page
    template instead, if it exists. But unlike an element-based template, a
    page-based template is not automatically grown if &lsquo;<a
    href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo; refers to a grid line that
    was not declared in the &lsquo;<a href="#grid"><code
    class=property>grid</code></a>&rsquo; property. Instead, &lsquo;<a
    href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo; is ignored.

   <p class=issue>Should we simplify page-based templates to only allow <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> and * as row heights and
    column widths? (And treat illegal sizes as &lsquo;<code
    class=css>*</code>&rsquo;?)

   <div class=example>
    <pre>
@page :first {grid: "abc" "def"}
@page {grid: "def"}

body {flow: e}
h1 {flow: b}
</pre>
   </div>

   <p>A page that has a grid template does not have a footnote area <a
    href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>.
    Instead each slot in the grid template has its own footnote area.

   <p id=page-break>If a slot of a page-based template on <a
    href="#non-interactive"><em>non-interactive</em></a> media has an
    &lsquo;<a href="#overflow"><code
    class=property>overflow</code></a>&rsquo; property of &lsquo;<code
    class=css>visible</code>&rsquo;, then content that overflows that slot in
    the block progression direction (i.e., below the slot in the case of
    horizontal text) causes a page break and is continued on the next page.

   <p class=issue>What happens in non-interactive media with an &lsquo;<a
    href="#overflow"><code class=property>overflow</code></a>&rsquo; of
    &lsquo;<code class=css>scroll</code>&rsquo; or &lsquo;<code
    class=css>auto</code>&rsquo;?

   <p>For page breaking purposes, each slot is considered as a page and the
    page break properties on the elements in that slot determine where the
    content for that slot is broken <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>. Content after the
    page break is put in the slot of the same name on the next page that has
    such a slot. If there is no such page, the UA should display the content
    on a separate page.

   <p class=issue>Or: the content after the page break is not displayed?
    displayed in the default slot?

   <p class=note>Note that this may happen if the template for the first page
    (&lsquo;<code class=css>@page :first</code>&rsquo;) uses a letter that
    occurs in no other @page rule. Possibly also if a page template is bound
    to a “named page” <a href="#CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> and that named page is
    not allowed to repeat. (At the time of writing, this is only a proposal
    in the GCPM Module.)

   <p class=note>Note that an element <var>A</var> that appears later in the
    document than an element <var>B</var> may thus be displayed on an earlier
    page than element <var>B</var>, because their respective slots are broken
    across pages in different ways.

   <p>Because of limitations of a device (e.g., limited memory), it may be
    that a UA has to print a page (force page breaks) even though some slots
    aren't filled yet.

   <div class=example>
    <p>This example shows how the first page may have a different layout from
     the other pages. The slot &lsquo;<code class=css>a</code>&rsquo; only
     occurs on the first page. If the content for that slot (in this case:
     all H1 elements) is too long, the remaining content of that slot <span
     class=issue>will not be displayed.</span> The slot &lsquo;<code
     class=css>@</code>&rsquo; occurs on normal pages and all its content can
     thus be displayed by adding additional pages.

    <pre>
@page :first {grid: "a" "*"}
@page {grid: "*"}
h1 {flow: a}
</pre>
   </div>

   <p class=note>Note that “page masters” (sequences of different
    templates for sequences of pages) can be made with the selectors defined
    in <span class=issue>[not yet decided].</span>

   <div class=example>
    <p>Both page-based and element-based templates can be used in the same
     document.

    <pre>
@page {grid: "a*"}
:lang(fr} {flow: a}
div.special {grid: "abc" "abd"}
</pre>
   </div>

   <div class=example>
    <p>Here is a page as one might find in a newspaper. It combines a layout
     template with multicolumn layout.

    <div class=figure>
     <p><img
      alt="5-column newspaper page with some   blocks of text that span several columns"
      longdesc=newspaper.desc src=newspaper.png>

     <p class=caption>The front page of a newspaper, with the first parts of
      several stories that are continued on other pages and headings and
      images that span several columns.
    </div>

    <pre>
@page :first {
  grid: "A  A  A  A  A  A  A  A  A" / 5cm
	".  .  .  .  .  .  .  .  ." / 0.25cm
	"B  .  C  C  C  C  C  C  C" / *
	"B  .  C  C  C  C  C  C  C" / *
	"B  .  C  C  C  C  C  C  C" / *
	"B  .  C  C  C  C  C  C  C" / *
	"B  .  C  C  C  C  C  C  C" / *
	"B  .  D  D  D  D  D  D  D" / *
	"B  .  D  D  D  D  D  D  D" / *
	"B  .  E  E  E  .  F  F  F" / *
	"B  .  E  E  E  .  F  F  F" / *
	"B  .  E  E  E  .  F  F  F" / *
	 * 3em * 3em * 3em * 3em *
}
h1 {flow: a; border-bottom: thick; margin-bottom: 1.5em}
#toc {flow: b; margin-right: -1.5em; border-right: thin;
  padding-right: 1.5em}
#leader {flow: c; columns: 4; column-gap: 3em}
#art1 {flow: d; columns: 4; column-gap: 3em; border-top: thin}
#art2 {flow: e; columns: 2; column-gap: 3em}
#art3 {flow: f; columns: 2; column-gap: 3em}
</pre>
   </div>

   <p class=issue id=see-page>If a slot on a page is full and the content
    continues on the next page, it may be useful to insert something like
    “continued on page X.” This is useful at any page break, but more
    important if there are multiple “flows” of content on each page.
    Maybe a break-content property? &lsquo;<code class=css>break-content:
    "▶ continued on p. " targetcounter(???, page)</code>&rsquo; or extend
    text-overflow from <a href="#CSS3TEXT"
    rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>?

   <p class=issue>How do you set the &lsquo;<a href="#vertical-align"><code
    class=property>vertical-align</code></a>&rsquo; property of a slot in a
    page? Does the &lsquo;<a href="#slot"><code
    class=css>::slot()</code></a>&rsquo; pseudo-element apply? &lsquo;<code
    class=css>@page :first :slot(A) {vertical-align: bottom}</code>&rsquo;
  </div>
  <!--=================================================================-->

  <div class=level4>
   <h2 id=chains><span class=secno>8. </span>Chaining slots: the &lsquo;<a
    href="#chains0"><code class=property>chains</code></a>&rsquo; property</h2>

   <p>Slots must be rectangular, but the appearance of non-rectangular slots
    can be achieved to some extent by chaining slots together. Content that
    is positioned in the first slot of a chain is automatically continued in
    the second slot if the first slot is full, and then the third, etc.

   <table class=propdef>
    <tbody>
     <tr>
      <td>Name:

      <td><dfn id=chains0>chains</dfn>

     <tr>
      <td>Value:

      <td>none | <var>&lt;letter&gt;</var>+ [ , <var>&lt;letter&gt;</var>+ ]*
       

     <tr>
      <td>Initial:

      <td>none

     <tr>
      <td>Applies to:

      <td><span title="template element">template elements</span>

     <tr>
      <td>Inherited:

      <td>no

     <tr>
      <td>Percentages:

      <td>N/A

     <tr>
      <td>Computed&nbsp;value:

      <td>specified value
   </table>

   <p>A value of &lsquo;<code class=css>none</code>&rsquo; means the
    element's template has no chains. Otherwise the value consists of one or
    more comma-separated lists of letters. No letter may appear more than
    once in the value. Letters that do not occur in the <em>template</em> are
    ignored, but do not make the value invalid. A list with only ignored
    letters is itself ignored.

   <p>All the non-ignored letters in a list, except for the last one, must
    refer to slots whose size does not depend on their contents, otherwise
    the list is ignored. The size of a slot does not depend on its content if
    all the columns and all the rows that the slot spans have a width,
    respectively height, that is a <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> or &lsquo;<code
    class=css>*</code>&rsquo;.

   <p>Each non-ignored list defines one <dfn id=chain.>chain.</dfn>

   <p>Each chain is filled with content in an analogous way to the pages in
    paged media: all the content that is positioned to the first slot in the
    chain is flowed, in document order, into the first slot in the chain
    until the slot is full, the rest is flowed into the second slot until it
    is full, etc.

   <p>Content must only be split between slots at an allowed page break <a
    href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>. As
    for page breaks, if a break occurs in the margin between blocks, all
    adjoining margins are set to zero.

   <p>CSS3 does not define what is the best break point to split content over
    slots. However, it is recommended to use the last possible break point
    that does not cause overflow. (If such a break point exists.)

   <p class=note>Note: It is the author's responsibility to make the height
    of relevant slots an integral number of lines if he wants to ensure that
    the lines in chained slots are aligned. The height does not automatically
    “snap” to a multiple of the line height.

   <div class=example>
    <p>The following template creates a double-staircase layout. In case the
     content is too long for the staircase, a slot of flexible height is
     added at the bottom.

    <pre>
div { display: "@@..ff...." / 3.6em
               ".aa..gg..." / 3.6em
               "..bb..hh.." / 3.6em
               "...cc..ii." / 3.6em
               "....dd..jj" / 3.6em
               ".........." / 0.6em
               "eeee..kkkk" / auto;
   chains: @ a b c d e, f g h i j k}
#first { position: @ }
#second { position: f }
</pre>

    <p>This could be applied to a document fragment such as

    <pre>
&lt;DIV&gt;
  &lt;P ID=first&gt;...
  &lt;P ID=second&gt;...
&lt;/DIV&gt;
</pre>
   </div>

   <div class=example>
    <p>Here is a paragraph shaped as a circle:

    <pre>
p { width: 12em;
    grid: ". . . . @ @ . . . ." / 1.2em
	  ". . a a a a a a . ." / 1.2em
	  ". b b b b b b b b ." / 1.2em
	  ". b b b b b b b b ." / 1.2em
	  "c c c c c c c c c c" / 1.2em
	  "c c c c c c c c c c" / 1.2em
	  ". d d d d d d d d ." / 1.2em
	  ". d d d d d d d d ." / 1.2em
	  ". . e e e e e e . ." / 1.2em
	  ". . . . f f . . . ." / 1.2em
	  "g g g g g g g g g g" / auto;
   chains: @ a b c d e f g }
</pre>
   </div>

   <div class=example>
    <p>Here is a page-based template that creates a two-column layout with a
     “hole” in the center:

    <pre>
@page:first {
    grid:
    "aaaaaaa.ddddddd"
    "aaaaaaa.ddddddd"
    "aaaaaaa.ddddddd"
    "aaaaaaa.ddddddd"
    "bbbb.......eeee"
    "bbbb.ggggg.eeee"
    "bbbb.ggggg.eeee"
    "bbbb.ggggg.eeee"
    "bbbb.......eeee"
    "ccccccc.fffffff"
    "ccccccc.fffffff"
    "ccccccc.fffffff"
    "ccccccc.fffffff";
    chains: a b c d e f }
@page::slot(g) {
    vertical-align: middle }

body { flow: a }
h1 { flow: g }
</pre>
   </div>

   <p class=note>Note: For more analysis of the possibilities and limits of
    non-rectangular slots, see the PhD thesis of César Acebal <a
    href="#ACEBAL2010" rel=biblioentry>[ACEBAL2010]<!--{{ACEBAL2010}}--></a>.
    

   <div class=issue>
    <p>Chaining of rectangular slots is not enough to create layouts with
     holes, e.g., an image in the middle of a text. Allowing non-rectangular,
     <em>connected</em> regions (in addition to chaining) would allow an
     example such as this:

    <pre>
grid: "A A A . . ."
      "A . A . . ."
      "A A A . . ."
      ". . . B B B"
      ". . . B . B"
      ". . . B B B";
chains: a b;
</pre>

    <p>Such cutouts in the middle of text usually create text that is
     difficult to read, and that is why there is no &lsquo;<code
     class=css>float: center</code>&rsquo;, e.g. But the CSS WG is
     considering a new property &lsquo;<code
     class=property>wrap-flow</code>&rsquo; for absolutely positioned
     elements that would allow, e.g.: &lsquo;<code class=css>p {position:
     absolute; top: 1fr; left: 1fr; width: 1fr; height: 1fr; wrap-flow:
     both}</code>&rsquo; to absolutely position a P element on top of a
     template element and cause the content of the element under it to wrap
     around it as if it were a float <a href="#CSS3-EXCLUSIONS"
     rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>.
   </div>

   <p class=note>Note that a slot can have overflowing content even if it is
    part of a <a href="#chain.">chain</a>: it can have content that is too
    wide but cannot be broken.

   <p>The &lsquo;<a href="#break-before0"><code
    class=property>break-before</code></a>&rsquo;, &lsquo;<a
    href="#break-after0"><code class=property>break-after</code></a>&rsquo;
    and &lsquo;<a href="#break-inside0"><code
    class=property>break-inside</code></a>&rsquo; properties have values that
    control breaking of content between slots in a chain (in particular
    &lsquo;<code class=css>region</code>&rsquo; and &lsquo;<code
    class=css>avoid-region</code>&rsquo;, see <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>).

   <p class=note>Note that, as defined in <a href="#paged">“Breaking grid
    elements across pages or columns”</a> above, a slot is a <a
    href="#fragmenter"><em>fragmenter</em></a> of type <em>region</em> in the
    terminology of <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>.
  </div>
  <!--=================================================================-->

  <h2 id=cr-exit-criteria><span class=secno>9. </span>CR exit criteria</h2>

  <p>For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd> each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd> passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd> a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

  <p>The specification will remain Candidate Recommendation for at least six
   months.

  <p>A <a href="/Style/CSS/Test/">test suite</a> will be developed during the
   Candidate Recommendation phase of this specification.
   <!--=================================================================-->

  <h2 id=history><span class=secno>10. </span>History</h2>

  <p>The following sections contain some of the use cases and design decision
   that led to this module and influenced its evolution.
   <!--=================================================================-->

  <h3 id=developing-a-model-of-declaring-using-st><span class=secno>10.1.
   </span>Developing a model of declaring, using, styling and resizing grids</h3>

  <p><em>(This section is not normative.)</em>

  <p class=mtb>The following types of use cases were considered for
   template-based layout.

  <ol>
   <li>
    <p>Standard Web pages.

   <li>
    <p>Grids and other table-like layouts. This includes grid layouts, frame
     layouts and table-like subdivision of a rectangular area.

   <li>
    <p>A layout structure with “flex”ing information. The flexing is
     represented by constraints that specify how the cells are to relate to
     one another: which cells are to be allowed to grow or shrink and how
     much. There may also be a priority ordering, which determines, based on
     the size of the allowed display window, which cells shrink, which grow
     and under which conditions.

   <li>
    <p>Layout structures with absolutely positioned (fixed-size) elements;
     for example a block of text into which several illustrations intrude at
     fixed positions within the block. This is like a float with respect to
     tightly wrapping the text around the intrusion, but the position of the
     intrusion is determined by the layout structure, not the content flowed
     into that structure.

    <p>An example of this is a multicolumn layout with one or more
     “absolutely positioned floats” that intrude on the columns (see <a
     href="#intrusion">figure</a>).

    <div class=figure id=intrusion>
     <p><img
      alt="An image that partially overlaps two columns makes the text wrap around it on both sides."
      longdesc=cutout.desc src=cutout.svg>

     <p class=caption>An image (or a “pull quote”) is placed centered on
      the page and intrudes on two areas.
    </div>

   <li>
    <p>Multiple, disconnected, fixed-size areas on a page that are chained
     together, each one receiving the content that doesn't fit in the
     previous slot. In combination with page breaks, this may give a layout
     as often seen in newspapers: the first few lines of each story on the
     first page, the rest of the story in other areas on subsequent pages.
     (It will probably need a way to conditionally insert “continued on
     page&nbsp;7” or similar text.)
  </ol>

  <p>For comparing proposals for template-based layouts, the working group
   identified four important aspects of each proposal:

  <ol>
   <li>
    <p>the physical layout structures &ndash; the way of structuring the
     “cells” (slots) into which content is flowed. This includes a way to
     identify the various layout containers.

   <li>
    <p>the binding mechanism &ndash; the way to specify that a given element
     (and its descendants) are to be placed in a given layout cell.

   <li>
    <p>the property distribution mechanism &ndash; the way to put properties
     onto the layout structure and the cells within it.

   <li>
    <p>the flexing mechanism &ndash; the way to describe how the layout
     structure should adapt itself to the higher level container (window) in
     which it is placed. This includes statements about which cells should
     grow and when they should grow.
  </ol>

  <p>In this specification, these aspects are as follows:

  <ol>
   <li>
    <p>A character matrix is used to show the layout structure and the cells
     are named by the character used to show where they are positioned.

   <li>
    <p>The binding of content to cells is handled by the &lsquo;<a
     href="#position"><code class=property>position</code></a>&rsquo;
     property which identifies a cell to which the content is bound.

   <li>
    <p>The shape, size and flexibility of the layout are specified with the
     character matrix. Some properties (background, border and vertical
     alignment) are attached to individual slots.

   <li>
    <p>There is limited “flexing” information. The choice is between
     fixed size, a fraction of the available size or the content's intrinsic
     size. (The latter is further subject to min/max sizes specified on that
     content.) It is not possible to say, e.g., that some column can only
     become wider if all other columns are at their maximum size.
  </ol>
  <!--=================================================================-->

  <h3 id=syntax-features-and-levels><span class=secno>10.2. </span>Syntax,
   features and levels</h3>

  <p><em>(This section is not normative.)</em>

  <p>The following is a partial list of design decisions and some arguments
   for and against each choice:
   <!--=================================================================-->

  <h4 id=named-vs-numbered-slots><span class=secno>10.2.1. </span>Named vs
   numbered slots</h4>

  <p>Named slots are very easy to understand and use. Experience with the
   draft showed that everybody who sees an example immediately understands
   what it means. Moreover, there is no need to use numbers or to count.

  <p>But it is different for absolutely positioned elements that use the
   grid. Those elements do not belong to a slot, they are merely placed on
   top of it, overlapping what is already there and each other.

  <p>Also, if grids are <a href="#auto-add">automatically extended with extra
   rows and columns (see below)</a> based on content, then those extra rows
   and columns cannot have names and must (probably, see below) be referred
   to by number.

  <p>In this specification, named slots are used to create flows of content,
   while numbers are used for absolute positioning, although names can be
   used there too, if the author prefers.
   <!--=================================================================-->

  <h4 id=single-letter-names-vs-identifiers><span class=secno>10.2.2.
   </span>Single letter names vs identifiers</h4>

  <p>The set of single letters is finite. And even if Unicode has many
   symbols, typing them may not be easy. Letters also do not permit to give a
   hint as to a slot's function (“heading,” “footer,”
   “advertisement”&hellip;).

  <p>On the other hand, any Unicode character can be typed as an escape, so
   if you run out of letters on the keyboard, you can always make a template
   like this:

  <pre>DIV {grid: "\1001\1002\1003"
           "\1001\1004\1005\1006"}
DIV H1 {flow: \1001}</pre>

  <p>In practice, it is also hard to come up with meaningful identifiers and
   so single letters require less thinking. And if you always have single
   letters, you don't need spaces between them either, which makes big
   templates easier to read.

  <p>This specification therefore uses single letters (i.e., on &lsquo;<a
   href="#grid-template0"><code
   class=property>grid-template</code></a>&rsquo;; the syntaxes of &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo; and &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; are the same either way).
   <!--=================================================================-->

  <h4 id=display><span class=secno>10.2.3. </span>Extend &lsquo;<a
   href="#display0"><code class=property>display</code></a>&rsquo; or add a
   grid property</h4>

  <p>Grids can be defined on elements such as table cells, blocks, inline
   blocks or list items, but not on elements such as tables or, inline
   elements. That can be expressed in the syntax by adding the grid to the
   &lsquo;<a href="#display0"><code class=property>display</code></a>&rsquo;
   property: &lsquo;<code class=css>display: inline-block "abc"
   "abd"</code>&rsquo; is valid, but &lsquo;<code class=css>display: inline
   "abc" "abd"</code>&rsquo; would not be. Or it can be expressed by an
   implicit dependency between properties: &lsquo;<code class=css>display:
   inline-block; grid: "abc" "abd"</code>&rsquo; has a grid, but &lsquo;<code
   class=css>display: inline; grid: "abc" "abd"</code>&rsquo; ignores the
   grid. (In this case it is actually the computed value of &lsquo;<a
   href="#display0"><code class=property>display</code></a>&rsquo; that
   applies, so, e.g., if the element floats, it would be a block and thus
   have a grid.)

  <p>The Multicol specification uses the latter model: &lsquo;<a
   href="#columns"><code class=property>columns</code></a>&rsquo; is a
   separate property and only applies if the element is a <a
   href="#block-container"><em>block container.</em></a> Given that
   precedent, it seemed reasonable to do the same here.
   <!--=================================================================-->

  <h4 id=combining-columns-and-grids><span class=secno>10.2.4.
   </span>Combining columns and grids</h4>

  <p>Style rules can specify both a grid and columns for the same element:

  <pre>DIV {columns: 20em; grid: "aabccc"}</pre>

  <p>The specification could say that grids don't apply to column elements,
   or vice versa, or it could say that the columns apply to contents of the
   DIV, after it has been flowed into the <a
   href="#default-slot."><em>default slot.</em></a> This last option seemed
   the most useful. It is consistent with other elements that flow into a
   slots: they, too, can have columns.
   <!--=================================================================-->

  <h4 id=shorthand-vs-single-property><span class=secno>10.2.5.
   </span>Shorthand vs single property</h4>

  <p>It is convenient to specify the grid as the value of a single property.
   It puts the column and row sizes immediately next to the rows and columns
   they apply to. The typical column widths can either be omitted or are
   short values like &lsquo;<code class=css>*</code>&rsquo; and &lsquo;<code
   class=css>1em</code>&rsquo;, and they fit easily in one line.

  <p>But if a grid has very many columns, or their sizes are complex (with
   many &lsquo;<code class=css>minmax()</code>&rsquo; and &lsquo;<code
   class=css>calc()</code>&rsquo; values, e.g.), it may be more readable to
   separate the slot names from the column sizes.

  <p>Also, separable properties for row and column sizes makes is easier to
   specify a transition/animation on them,, because you don't have to repeat
   the slot names (which cannot animate).

  <p>For those reasons, this specification defines the &lsquo;<a
   href="#grid"><code class=property>grid</code></a>&rsquo; property as a
   shorthand, at the cost for authors of having to learn four new properties
   instead of one (or zero, if the grid had been added to <a
   href="#display">display (see above).</a>
   <!--=================================================================-->

  <h4 id=the-number-of-rows-and-columns><span class=secno>10.2.6. </span>The
   number of rows and columns</h4>

  <p>If the grid template can also be specified with individual properties,
   how many columns &amp; rows does it have if those properties contradict
   each other? Does the template (if not &lsquo;<code
   class=css>none</code>&rsquo;) determine the number of columns or the
   maximum of the template and the list of sizes? E.g.:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>Specified values

     <th>Meaning if the template prevails

     <th>Meaning if the maximum value is used

   <tbody>
    <tr>
     <td>
      <pre>grid-template: "a b c";
grid-columns: * * * * *</pre>

     <td>
      <pre>grid-template: "a b c";
grid-columns: * * *</pre>

     <td>
      <pre>grid-template: "a b c . .";
grid-columns: * * * *</pre>
  </table>

  <p>The former is consistent with the model for &lsquo;<a
   href="#background-image"><code
   class=property>background-image</code></a>&rsquo; and &lsquo;<a
   href="#background-size"><code
   class=property>background-size</code></a>&rsquo;. However, unlike for
   backgrounds, where a size without an image makes no sense, in this case a
   size without a slot name <em>can</em> make sense: it can represent empty
   space (&lsquo;<code class=css>.</code>&rsquo;) of the given size.

  <p>What is more likely: that people consciously specify empty rows and
   columns without putting dots in the template (to save typing or to avoid
   typing too many dots), or that people mistakenly add a size too many?

  <p>The specification currently sets the number of rows and columns to the
   maximum of the three properties.
   <!--=================================================================-->

  <h4 id=need-fr><span class=secno>10.2.7. </span>&lsquo;<code
   class=css>*</code>&rsquo; vs &lsquo;<code class=css>fr</code>&rsquo;</h4>

  <p><a href="http://www.w3.org/Style/CSS/Tracker/issues/127">ISSUE-127:</a>
   It is very common for the columns of a grid to have all the same width.
   That is because the slots in a grid, although of different widths
   themselves, typically are multiples of some fundamental measure. And thus
   equal columns is the default in the current syntax. And if it needs to be
   specified explicitly which columns have the same width (e.g., because
   there are also other columns in the grid) then the symbol for it is short:
   &lsquo;<code class=css>*</code>&rsquo;. This is ideal for slots whose
   widths are small multiples of the fundamental measure. E.g., the widths of
   slots a, b and c in the following grid relate to each other as 1:3:2:

  <pre>
grid: "a b b b c c"
      "a . . . c c"
</pre>

  <p>However, if the ratios of the slots are ratios of larger numbers, the
   notation may become long. E.g., to make slots a and b with ratio 10:11,
   you would have to make 21 columns:

  <pre>grid: "aaaaaaaaaabbbbbbbbbbb"</pre>

  <p>It needs to be investigated if such ratios are frequent. (They don't
   seem to occur in printed magazines.) And if among the ratios that do
   occur, even if infrequently, there are some would be impractical to write
   in this way.

  <p>Assuming another notation is needed, it could be made by prefixing a
   number (e.g., &lsquo;<code class=css>7* 10*</code>&rsquo;) or, to make the
   notation look more like a dimension, by creating a special unit
   &lsquo;<code class=css>fr</code>&rsquo; (&lsquo;<code class=css>e.g.,
   </code>&rsquo;3.5fr 5fr', which is the same as 7 + 10 stars).

  <p>If &lsquo;<code class=css>fr</code>&rsquo; is added, it could either be
   in addition to &lsquo;<code class=css>*</code>&rsquo; or instead of
   &lsquo;<code class=css>*</code>&rsquo;. In the former case, &lsquo;<code
   class=css>*</code>&rsquo; = &lsquo;<code class=css>1fr</code>&rsquo;.

  <p>Unless it is shown that the notation with only &lsquo;<code
   class=css>*</code>&rsquo; is not practical in real cases, it seems better
   to neither introduce numbers (&lsquo;<code class=css>7*</code>&rsquo;) nor
   units (&lsquo;<code class=css>3.5fr</code>&rsquo;). It would give too many
   different ways to write the same grid, causing authors and readers of
   style sheets to have to think longer about each grid. (E.g., &lsquo;<code
   class=css>grid: "abbbcc"</code>&rsquo; could then also be written as
   &lsquo;<code class=css>grid: "abc" 1* 3* 2*</code>&rsquo; or &lsquo;<code
   class=css>grid: "abbbc" 0.5fr 0.5fr 0.5fr 0.5fr 1fr</code>&rsquo;, etc.)

  <p>For the moment, the specification allows both the &lsquo;<code
   class=property>fr</code>&rsquo; and * notations.
   <!--=================================================================-->

  <h4 id=auto-add><span class=secno>10.2.8. </span>Automatically add rows and
   columns</h4>

  <p>The main purpose of grids is to improve on absolute positioning for
   displaying elements in a different visual order. You typically know how
   many positions you need in advance.

  <p>If you don't need to change the visual order, then table layout can
   often align the elements sufficiently.

  <p>However, if table layout isn't possible (there are not enough elements
   in the source to create the necessary table rows, the control over the
   size of table cells is too limited, or you want a column-major table), it
   may be useful to use a grid in a similar manner to a table: the number of
   rows and columns is not specified in the style, but depends on the number
   of elements that are put in the grid.

  <p>E.g., you could transpose a table with an unknown number or rows like
   this:

  <pre>
&lt;TABLE>
 &lt;TR>&lt;TD>A1 &lt;TD>A2 &lt;TD>A3
 &lt;TR>&lt;TD>B1 &lt;TD>B2 &lt;TD>B3
 ...
 &lt;TR>&lt;TD>K1 &lt;TD>K2 &lt;TD>K3
 ...
&lt;/TABLE>
</pre>

  <p>into a tabular display with an unknown number of columns somewhat like
   this:

  <pre>
A1 B1... K1...
A2 B2... K2...
A3 B3... K3...
</pre>

  <p>with style rules like this:

  <pre>
TABLE {grid-columns: auto; grid-rows: auto}
TD:first-child {grid-position: next / 1}
TD {grid-position: same / next}
</pre>

  <p>This uses keywords instead of numbers, as described in <a
   href="#next-same">“Automatic placement of elements”</a> below.

  <p>What is the size of the added rows and columns? The example above
   assumes the size of the single, specified grid cell is simply repeated.
   There could also be a marker in the list of sizes to indicate which set of
   sizes is repeated. Or there could be a separate property with the list of
   sizes that is repeated for all added rows and columns.

  <p>It would probably be difficult to specify that any number of columns of
   size A can be added, but that the last column must have size B&hellip;

  <p>The current specification specifies that extra rows and columns are
   added when needed for absolute positioning (&lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo;). It is not possible to
   automatically create new, anonymous flows. (But sometimes you can use
   multi-column elements to do that, and possibly grid templates can be
   attached to columns, via a &lsquo;<code class=css>::column</code>&rsquo;)
   pseudo-element, see <a href="#CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>.)
   <!--=================================================================-->

  <h4 id=rectangular-slots-vs-non-rectangular-slo><span class=secno>10.2.9.
   </span>Rectangular slots vs non-rectangular slots</h4>

  <p>Non-rectangular slots, such as

  <pre>
grid: "a a a"
      "a a ."
      "a . ."
</pre>

  <p>are probably something for level 4. Or maybe the Exclusions module can
   be used instead.
   <!--=================================================================-->

  <h4 id=chained><span class=secno>10.2.10. </span>Chained slots</h4>

  <p>Many layouts found in magazines can be handled with multi-columns <a
   href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> (possibly
   extended with ideas in GCPM <a href="#CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>) or with multi-column
   elements inside a grid, but some more complicated designs appear to
   require chained slots (and some would be easier to specify that way than
   with columns).

  <pre>
grid: "A A E"
      "A A E"
      "B B E"
      "C D E";
chains: B C D E
</pre>

  <p>Also, when grids are applied to pages (see <a href="#page-grid">“Page
   grids”</a> below), it is essential that slots are connected to slots on
   the next or some subsequent page, so that the overflow can find a place.

  <p>But this could be a feature for level 4.
   <!--=================================================================-->

  <h4 id=page-grid><span class=secno>10.2.11. </span>Page grids</h4>

  <p>Typically in magazines, each page has a slightly different layout of
   slots, although they are all based on the same set of columns, usually
   between 3 and 6. It is difficult to specify the grids of all pages as a
   single long grid on the BODY element; and indeed impossible if you don't
   know how many pages use each kind of layout.

  <p>Applying grids to &lsquo;<code class=css>@page</code>&rsquo; is an
   alternative. It has a few issues:

  <ul>
   <li>We need named paged (&lsquo;<code class=css>@page news
    {&hellip;}</code>&rsquo;), a way for an element to say it needs to start
    on a specific kind of page (&lsquo;<code class=css>break-before:
    page(news)</code>&rsquo; or &lsquo;<code class=css>break-before; always;
    page: news</code>&rsquo;), and a way to say which style follows which
    (&lsquo;<code class=css>@page news-odd {next: news-even}</code>&rsquo;).

   <li>What happens to footnotes <a href="#CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>? Each slot probably has
    its own footnote area.

   <li>How are slots on different pages connected? Probably by having the
    same name.
  </ul>

  <p>This is probably for level 4.
   <!--=================================================================-->

  <h4 id=style-the-slots-pseudo-elements><span class=secno>10.2.12.
   </span>Style the slots (pseudo-elements)</h4>

  <p>Slots can have properties of their own: background, overflow,
   writing-mode, direction, box-shadow, margin, border, padding. What else?

  <p>For &lsquo;<a href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo;, see <a
   href="#vert-align">“Vertical alignment inside slots”</a> below.

  <p>This specification also allows &lsquo;<a href="#z-index"><code
   class=property>z-index</code></a>&rsquo;, because then you can give a slot
   negative margins and have it partially overlap some other slot.

  <p>&lsquo;<code class=property>Wrap-flow</code>&rsquo; (from <a
   href="http://www.w3.org/TR/css3-exclusions/">CSS Exclusions and
   Shapes</a>) could be useful for slots with negative margins, too.

  <p>&lsquo;<a href="#content"><code class=property>Content</code></a>&rsquo;
   might be useful, but is maybe too powerful: you could write a whole
   document, with proper styling, in a style sheet and would only need an
   empty source document.
   <!--=================================================================-->

  <h4 id=style-the-contents-of-slots-region-based><span class=secno>10.2.13.
   </span>Style the contents of slots (region-based styling)</h4>

  <p>By means of a new pseudo-element, style could be applied to only the
   part of an element that is inside a certain slot (similar to how
   &lsquo;<code class=css>::first-line</code>&rsquo; applies style only to
   the part of an element in the first line of a paragraph):

  <pre>P::fragment(a) {font-size: large}</pre>

  <p>This looks like a level 4 feature.
   <!--=================================================================-->

  <h4 id=orient-the-grid-with-writing-mode-vs-ori><span class=secno>10.2.14.
   </span>Orient the grid with writing mode vs orient the slots</h4>

  <p>A grid can contain vertical text, but the grid itself probably doesn't
   need to be rotated or flipped. Indeed, it would be confusing if it did. In
   other words, the following element has vertical text in the top right slot
   and an image in the bottom right slot:

  <pre>
&lt;DIV STYLE="grid: "a*" "ab"; writing-mode: vertical-rl">
 Some text here...
 &lt;IMG STYLE="flow: b"...>
 ...
&lt;/DIV>
</pre>

  <p>In this specification, a grid template is always laid out with the first
   row at the top and the first column on the left. But the slots themselves
   can have a writing mode (by default the one “inherited” from the grid
   element).
   <!--=================================================================-->

  <h4 id=indicating-the-default-slot-vs-><span class=secno>10.2.15.
   </span>Indicating the default slot (&lsquo;<code class=css>*</code>&rsquo;
   vs &lsquo;<code class=css>@</code>&rsquo;)</h4>

  <p>The symbol &lsquo;<code class=css>*</code>&rsquo; seems a good choice,
   as the concept of default is somewhat similar to the concept of wildcard.
   The &lsquo;<code class=css>*</code>&rsquo; is also used to set the size of
   rows and columns, but the context is probably enough to avoid confusion.
   <!--=================================================================-->

  <h4 id=abspos><span class=secno>10.2.16. </span>Flowing vs absolutely
   positioning content in a grid</h4>

  <p>The most flexible model for positioning content in a grid is to consider
   the slot as a flow, which can contain zero, one or more elements and even
   anonymous content. This is the same concept as a table cell: the cell also
   is a separate flow that can contain several elements as well as anonymous
   content.

  <p>An element inside a slot thus has its size determined as an element in
   normal flow. E.g., if you set a background on it, the background covers
   the element only, not the whole slot. (But the slot has its own background
   property for that.)

  <p>But you may also want to use the grid as a coordinate system for
   absolutely positioned elements, which then overlap with the contents of
   the grid (above or below it, depending on &lsquo;<a href="#z-index"><code
   class=property>z-index</code></a>&rsquo;).

  <p>And, as <a href="#auto-add">“Automatically add rows and columns”</a>
   above explains, you may want a table-like display of elements that are
   neither absolutely positioned nor flowed, but the table properties aren't
   powerful enough.

  <p>Those two ideas can be added to the grid template model: the declaration
   of the grid is reused, but instead of using &lsquo;<a href="#flow0"><code
   class=property>flow</code></a>&rsquo; to position an element into it, the
   element is absolutely positioned on top of it. But unlike the absolute
   positioning in level 2, this positioning is allowed to influence the size
   of the grid element on which it is positioned.

  <p>There are two ideas for how to do this. One idea is to define a special
   kind of unit, &lsquo;<code class=css>gr</code>&rsquo;, which is only
   defined for elements that have a <a href="#grid-ancestor"><em>grid
   ancestor,</em></a> and which can be used on the &lsquo;<a
   href="#top"><code class=property>top</code></a>&rsquo;, &lsquo;<a
   href="#right"><code class=property>right</code></a>&rsquo;, &lsquo;<a
   href="#bottom"><code class=property>bottom</code></a>&rsquo; and &lsquo;<a
   href="#left"><code class=property>left</code></a>&rsquo;, properties of
   absolutely positioned elements. &lsquo;<code class=css>left:
   2.25gr</code>&rsquo; means the position is in the third column, one
   quarter of the way towards the fourth column.

  <p>Another way is to define a new property &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; (shorthand for &lsquo;<a
   href="#grid-position-x"><code
   class=property>grid-position-x</code></a>&rsquo; and &lsquo;<a
   href="#grid-position-y"><code
   class=property>grid-position-y</code></a>&rsquo;), which, if set,
   overrides &lsquo;<a href="#top"><code
   class=property>top</code></a>&rsquo;, &lsquo;<a href="#left"><code
   class=property>left</code></a>&rsquo;, etc. and which takes numbers or
   names of slots (up to four of them, to set the four sides).

  <p>Yet another way is to extend &lsquo;<a href="#top"><code
   class=property>top</code></a>&rsquo;, &lsquo;<a href="#left"><code
   class=property>left</code></a>&rsquo;, etc., with unitless values (meaning
   the n'th grid column or row) and letters (meaning the appropriate edge of
   the slot of that name).

  <p>This specification adds a &lsquo;<a href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; property, which overrides
   &lsquo;<a href="#top"><code class=property>top</code></a>&rsquo;,
   &lsquo;<a href="#right"><code class=property>right</code></a>&rsquo;, etc.
   When it is used, it also indicates that the element takes part in the size
   calculations of the rows and columns it is put on top of.
   <!--=================================================================-->

  <h4 id=use-the-pseudo-class-to-create-additiona><span class=secno>10.2.17.
   </span>Use the pseudo-class to create additional slots</h4>

  <p>If you want a flow that overlaps with a grid element (i.e., absolutely
   positioned on top of it), but that flow doesn't correspond to an element
   in the document you could create a pseudo-element that is like an
   “absolutely positioned slot:”

  <pre>DIV::slot(z) {position: absolute; grid-position: 2 / 2}</pre>

  <p>Like other &lsquo;<a href="#slot"><code
   class=css>::slot()</code></a>&rsquo; pseudo-elements, it applies to <a
   href="#grid-element.">grid elements</a> only (the DIV in this example must
   be a grid element), but unlike other &lsquo;<a href="#slot"><code
   class=css>::slot()</code></a>&rsquo; pseudo-elements it doesn't style an
   existing slot, but implicitly creates a new one. (It is some kind of error
   if the name &lsquo;<code class=css>z</code>&rsquo; already exists in the
   grid template.)

  <p>Then you can flow other elements into this slot:

  <pre>.note {flow: z}</pre>

  <p>This mechanism is pretty difficult to understand. Experience shows it is
   also difficult to explain and in a style sheet it is difficult to
   recognize. What are the use cases (that can't be done with negative
   margins, absolute positioning, etc.)? This specification does not allow
   the creation of arbitrary, absolutely positioned pseudo-elements. If
   needed, it could be added in level 4.
   <!--=================================================================-->

  <h4 id=names-for-edges><span class=secno>10.2.18. </span>Names for edges</h4>

  <p>If you position elements absolutely (with &lsquo;<a href="#top"><code
   class=property>top</code></a>&rsquo;, &lsquo;<a href="#left"><code
   class=property>left</code></a>&rsquo;, etc. or with &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo;, see <a
   href="#abspos">“Flowing vs absolutely positioning content in a
   grid”</a> above), you can use numbers to refer to grid lines: from
   &lsquo;<code class=css>1</code>&rsquo; (the left edge of the first column)
   to <var>N</var>+1 (the right edge of the last column) and ditto for rows.
   You can also refer to the edges of slots, for an extra level of
   indirection and to avoid the need for numbers.

  <p>It has been suggested to create a mechanism to assign arbitrary names to
   grid lines, even multiple aliases for the same grid line. You could then
   absolutely position an element at grid line &lsquo;<code
   class=css>foo</code>&rsquo; (e.g., &lsquo;<code class=css>grid-position:
   foo / 1</code>&rsquo;) and later assign that alias &lsquo;<code
   class=css>foo</code>&rsquo; to a different grid line without having to
   change the style rules that use it. E.g., the following could make the
   name &lsquo;<code class=css>a-line</code>&rsquo; an alias for the number 2
   and &lsquo;<code class=css>b-line</code>&rsquo; an alias for the number 4:
   

  <pre>
/* Create a 7x2 grid template */
DIV {grid-columns: * a-line * * b-line * *; grid-rows: * *}
/* Put H2 at cell x=4, y=2 */
DIV H2 {position: absolute; grid-position: b-line / 2}
</pre>

  <p>(This could also use strings instead of identifiers, for even more
   flexible names.)

  <p>This turns out to be very difficult to explain to users, partly because
   of the syntax, partly because of the indirection, which comes on top of
   the inherent indirection that CSS already requires (the style rules are in
   a style sheet, not on the elements they apply to) and the indirection of
   specifying a position indirectly by referring to an abstract grid.

  <p>Also, the number of usages of &lsquo;<a href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; (for a given grid) is not
   likely to be so big that a symbolic name for a grid line is necessary.
   Moreover, this is easy to handle with a macro processor.

  <p>This specification does not include a mechanism to assign aliases to
   grid lines.
   <!--=================================================================-->

  <h4 id=position-from-the-right-and-bottom><span class=secno>10.2.19.
   </span>Position from the right and bottom</h4>

  <p>If elements are absolutely positioned relative to a grid (with &lsquo;<a
   href="#top"><code class=property>top</code></a>&rsquo;, &lsquo;<a
   href="#left"><code class=property>left</code></a>&rsquo; or &lsquo;<a
   href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo;, see <a
   href="#abspos">“Flowing vs absolutely positioning content in a
   grid”</a> above), and especially if the grid can automatically grow (see
   <a href="#auto-add">“Automatically add rows and columns”</a>) it might
   be useful to position elements relative to the last row or column,
   independent of how many rows or columns the grid element has. That could
   be done with negative numbers:

  <pre>grid-position-x: -1</pre>

  <p>This specification does not allow positioning from the end. If uses
   cases are found, it could be added in level 4.
   <!--=================================================================-->

  <h4 id=syntax-features-to-shorten-long-grid-spe><span class=secno>10.2.20.
   </span>Syntax features to shorten long grid specifications</h4>

  <p>Grids are typically very regular (see also <a
   href="#need-fr">&lsquo;<code class=css>*</code>&rsquo; vs &lsquo;<code
   class=css>fr</code>&rsquo;</a> above). E.g., if you specify the margins
   between slots in the template (rather then with a &lsquo;<a
   href="#margin"><code class=property>margin</code></a>&rsquo; property on
   the slots), you often end up with a grid similar to this:

  <pre>grid-template: "a.b.c.d.e.f";
grid-columns: * 1em * 1em * 1em * 1em * 1em *</pre>

  <p>Even for the columns of broadsheet newspapers (6&ndash;8 columns), that
   still fits easily on one line, even with margins between the columns. But
   if the grid gets even longer, there may be a need for abbreviations, e.g.:
   

  <pre>grid-columns: * repeat(1em *, 5)</pre>

  <p>or

  <pre>grid-columns: * (1em *)[5]</pre>

  <p>or

  <pre>grid-columns: * 5//1em *//</pre>

  <p>This makes the syntax harder to learn and read, though. So it needs some
   good use cases first. This can be postponed to level 4.
   <!--=================================================================-->

  <h4 id=fit-content-vs-auto-vshellip><span class=secno>10.2.21.
   </span>&lsquo;<code class=css>fit-content</code>&rsquo; vs &lsquo;<code
   class=css>auto</code>&rsquo; vs&hellip;</h4>

  <p>Column sizes can have an exact size or a minimum and maximum size, by
   means of &lsquo;<code class=css>minmax()</code>&rsquo;. A common case is
   probably &lsquo;<code class=css>minmax(min-content,
   max-content)</code>&rsquo;. (Is that really true?) Should that common case
   have its own keyword? If so, should that keyword be &lsquo;<code
   class=css>fit-content</code>&rsquo;?

  <p>&lsquo;<code class=css>fit-content</code>&rsquo; in the Box Module is
   defined as something else, viz., min(max(available width, &lsquo;<code
   class=css>min-content</code>&rsquo;), &lsquo;<code
   class=css>max-content</code>&rsquo;)).

  <p>In this specification, &lsquo;<code class=css>auto</code>&rsquo; (not
   &lsquo;<code class=css>fit-content</code>&rsquo;) is allowed for column
   and row sizes and has the meaning of &lsquo;<code
   class=css>minmax(min-content, max-content)</code>&rsquo;.
   <!--=================================================================-->

  <h4 id=vert-align><span class=secno>10.2.22. </span>Vertical alignment
   inside slots</h4>

  <p>The content of a slot can be vertically aligned with &lsquo;<a
   href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo;, exactly like the content
   in table cells. (Despite the name, it would, of course, be horizontal
   alignment if the slot's writing mode was vertical.)

  <p>There could also be a property that applies exclusively to grids
   (grid-slot-align?), just like Flexbox proposes an alignment property that
   applies exclusively to flex items (&lsquo;<code
   class=property>flex-item-align</code>&rsquo;). But why should users learn
   a new property when &lsquo;<a href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo; fits so well?

  <p>Looking beyond tables, flex boxes and grids, there is also a need for
   vertical alignment of content in normal blocks (when those blocks have a
   height that does not depend on their contents). There might thus also be a
   new property that applies uniformly to all cases. E.g.: &lsquo;<code
   class=css>block-align: top | bottom | middle | baseline |
   <var>&lt;percentage&gt;</var> | <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a></code>&rsquo;, where
   &lsquo;<code class=css>baseline</code>&rsquo; simply means &lsquo;<a
   href="#top"><code class=css>top</code></a>&rsquo; everywhere outside grids
   and tables. (A separate question is if it would override &lsquo;<a
   href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo; in tables). Or &lsquo;<a
   href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo; itself could be
   generalized to apply to all <a href="#block-container"><em>block
   container</em></a> boxes (although the meaning would be ambiguous on
   &lsquo;<code class=css>inline-block</code>&rsquo;).

  <p>Given how little progress has been made on this generally applicable
   property, the present specification just reuses &lsquo;<a
   href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo;. If a differently named
   property is developed after the grid template module becomes a REC, then
   whatever interaction it has with &lsquo;<a href="#vertical-align"><code
   class=property>vertical-align</code></a>&rsquo; would apply to slots, too.
   <!--=================================================================-->

  <h4 id=horizontal-alignment-inside-slots><span class=secno>10.2.23.
   </span>Horizontal alignment inside slots</h4>

  <p>Elements can be centered in, or aligned to a side of, their parent with
   &lsquo;<code class=css>auto</code>&rsquo; margins. But this doesn't always
   work: for many combinations of &lsquo;<a href="#width"><code
   class=property>width</code></a>&rsquo; and &lsquo;<a
   href="#direction"><code class=property>direction</code></a>&rsquo;, the
   auto margins are ignored. There may thus be a new property (&lsquo;<code
   class=css>block-align: center</code>&rsquo;?) or value (&lsquo;<code
   class=css>margin: any</code>&rsquo;?) in the future for correct alignment
   and centering.

  <p>Or should there be an alignment property that only applies to grid
   slots? &lsquo;<code class=property>grid-slot-align</code>&rsquo;?

  <p>This specification defines nothing, in the expectation of a general
   solution in the future.
   <!--=================================================================-->

  <h4 id=auto-margins-on-slots><span class=secno>10.2.24. </span>Auto margins
   on slots</h4>

  <p>Do &lsquo;<code class=css>auto</code>&rsquo; margins on slots (e.g.,
   &lsquo;<code class=css>::slot(a) {margin: auto}</code>&rsquo;) do
   anything? Or are they simply 0?
   <!--=================================================================-->

  <h4 id=page-floats><span class=secno>10.2.25. </span>Page floats</h4>

  <p><a href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>
   defines “page floats” (which are slightly misnamed, because they cause
   floats to float not just to the top or bottom of a page, but also to the
   top or bottom of a column in certain contexts). What do they do in slots?

  <p>This specification treats a slot similar to a column, e.g., &lsquo;<code
   class=css>float: top</code>&rsquo; means the top of the slot, not of the
   page. Similarly, if slots are <a href="#chained">chained,</a> then the
   float modifiers select the next slot, not the next page.
   <!--=================================================================-->

  <h4 id=break-properties><span class=secno>10.2.26. </span>Break-*
   properties</h4>

  <p>The &lsquo;<a href="#break-before0"><code
   class=property>break-before</code></a>&rsquo;, &lsquo;<a
   href="#break-after0"><code class=property>break-after</code></a>&rsquo;
   and &lsquo;<a href="#break-inside0"><code
   class=property>break-inside</code></a>&rsquo; properties in the draft of
   February 2012 (see <a href="#CSS3-BREAK"
   rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>) have keywords
   &lsquo;<code class=css>region</code>&rsquo; and &lsquo;<code
   class=css>avoid-region</code>&rsquo;. Should they be called &lsquo;<a
   href="#slot"><code class=css>slot</code></a>&rsquo; and &lsquo;<code
   class=css>avoid-slot</code>&rsquo; instead?
   <!--=================================================================-->

  <h4 id=next-same><span class=secno>10.2.27. </span>Automatic placement of
   elements</h4>

  <p>There may be cases where elements are to be placed based on where the
   previous elements was placed, which isn't always expressible with a clever
   selector. An example is placing DD elements in the same slot as the
   preceding DT element. (Note that there may be more than one DD associated
   with a single DT, so a selector such as &lsquo;<code class=css>DT +
   DD</code>&rsquo; doesn't work. The selector &lsquo;<code class=css>DT ~
   DD</code>&rsquo; doesn't work either, because it selects DDs that belong
   to the next DT, too.).

  <p>A keyword may help: &lsquo;<code class=css>flow: same</code>&rsquo;.

  <p>In some cases, elements may need to be placed in the next column or row
   after the previous element. If there are cases where rows or columns need
   to be <a href="#auto-add">added automatically based on content,</a> those
   are probably also the cases where element are to be placed in the
   “next” row or column w.r.t. to the preceding element.

  <p>E.g., with a keyword: &lsquo;<code class=css>grid-position:
   next/same</code>&rsquo; (for “next column, same row”).

  <p>This specification defines &lsquo;<code class=css>same</code>&rsquo; on
   &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo; and
   &lsquo;<a href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; and &lsquo;<code
   class=css>next</code>&rsquo; on &lsquo;<a href="#grid-position0"><code
   class=property>grid-position</code></a>&rsquo; only, because so far there
   are no use case for &lsquo;<code class=css>next</code>&rsquo; on &lsquo;<a
   href="#flow0"><code class=property>flow</code></a>&rsquo;.
   <!--=================================================================-->

  <h2 id=changes><span class=secno>11. </span>Changes</h2>

  <p>Summary of major changes since the <a
   href="/TR/2011/WD-css3-layout-20111129/">29 November 2011 draft:</a>

  <ul>
   <li>Added a <a href="#accessibility">note about accessibility.</a>

   <li>Instead of directly on &lsquo;<a href="#display0"><code
    class=property>display</code></a>&rsquo;, the grid template is now
    specified with a new property, &lsquo;<a href="#grid"><code
    class=property>grid</code></a>&rsquo;, to be consistent with &lsquo;<a
    href="#columns"><code class=property>columns</code></a>&rsquo; in the
    multi-column specification <a href="#CSS3COL"
    rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, and also to allow the
    grid to be a shorthand for more primitive properties: &lsquo;<a
    href="#grid-template0"><code
    class=property>grid-template</code></a>&rsquo;, &lsquo;<a
    href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; and
    &lsquo;<a href="#grid-columns"><code
    class=property>grid-columns</code></a>&rsquo;, which makes animations
    easier to specify.

   <li>Replaced @ by * to indicate the default slot. The asterisk looks
    better and may also be easier to remember, because of its association
    with the notion of “wild card.”

   <li>Added dimensions with the &lsquo;<code class=css>fr</code>&rsquo; unit
    as an alternative to * on row and column sizes (and an issue about
    whether these units are useful enough).

   <li>Removed the &lsquo;<code class=css>gr</code>&rsquo; unit as a means to
    absolutely position elements on a grid and instead added a special
    property, &lsquo;<a href="#grid-position0"><code
    class=property>grid-position</code></a>&rsquo; (shorthand for &lsquo;<a
    href="#grid-position-x"><code
    class=property>grid-position-x</code></a>&rsquo; and &lsquo;<a
    href="#grid-position-y"><code
    class=property>grid-position-y</code></a>&rsquo;).

   <li>Absolutely positioned elements, if positioned relative to a grid, are
    now taken into account when calculating the size of the grid.

   <li>Because of the above, it is now possible to automatically add rows and
    columns to a grid element if elements are absolutely positioned relative
    to grid lines beyond those declared in the grid template.

   <li>Moved the &lsquo;<a href="#chains0"><code
    class=property>chains</code></a>&rsquo; property to level 4 of this
    module. (In theory, it shouldn't be more difficult for a UA to balance
    content in a chain of slots than in a chain of columns, but it requires
    some new code, nevertheless.)

   <li>Moved page-based templates (&lsquo;<code
    class=css>@page</code>&rsquo;) to level 4. The scope of slot names,
    automatic chaining of slots on different pages, and especially the
    question of how to create more than three page templates (&lsquo;<code
    class=css>:first</code>&rsquo;, &lsquo;<a href="#left"><code
    class=css>:left</code></a>&rsquo; and &lsquo;<a href="#right"><code
    class=css>:right</code></a>&rsquo;) need more investigation.

   <li>Moved region-based styling (i.e., pseudo-element selectors for styling
    elements differently based on which slots they fall into) to level 4. It
    is only useful in combination with chaining of slots (the &lsquo;<a
    href="#chains0"><code class=property>chains</code></a>&rsquo; property)
    or page-based templates.

   <li>Renamed the keyword &lsquo;<code class=css>fit-content</code>&rsquo;
    to &lsquo;<code class=css>auto</code>&rsquo;. The former has a specific
    meaning in <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>, which is related, but
    not the same.

   <li>The margin properties are now allowed on slots. Even though this is
    redundant with the possibility to create empty slots in the grid
    template, it seems more consistent, because slots also have borders
    (which, unlike in tables, do not collapse).

   <li>Different set of constraints and a different function to optimize when
    calculating the size of rows and columns: the row heights and column
    widths are now considered together, which should guarantee that the
    overall size of the grid element is as small as possible in all cases and
    also makes the handling of width and height symmetric.

   <li>References to &lsquo;<code class=css>page-break-*</code>&rsquo;
    properties and to <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> have been replaced with
    references to &lsquo;<code class=css>break-*</code>&rsquo; properties and
    the new <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> module.

   <li>Now allows <var>&lt;percentage&gt;</var> on &lsquo;<a
    href="#vertical-align"><code
    class=property>vertical-align</code></a>&rsquo;.

   <li>Generalized the text for &lsquo;<a href="#vertical-align"><code
    class=property>vertical-align</code></a>&rsquo; to apply to all writing
    modes.
  </ul>
  <!--=================================================================-->

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>The first ideas for describing a template in CSS date from 1996 and are
   described in <a href="/TR/NOTE-layout"><cite>Frame-based layout via Style
   Sheets</cite></a> by Bert Bos, Dave Raggett and Håkon Wium Lie. The idea
   was revived in 2005 on the request of W3C's Device Independence Working
   Group and benefited especially from discussions with Rhys Lewis and Rotan
   Hanrahan from that group.

  <p>This specification was further influenced by ideas about form layout by
   <a
   href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0077.html">
   Dave Raggett [member-only link]</a> and an early write-up of the features
   of <a href="http://www.mozilla.org/projects/xul/xul.html"> XUL</a> by <a
   href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JanMar/0432.html">
   Ian Hickson [member-only link].</a>

  <p><a href="http://transcendingcss.com/support/">Andy Clarke,</a> <a
   href="http://sushiandrobots.com/about">Jina Bolton</a> and <a
   href="http://lawver.net/">Kevin Lawver</a> provided use cases, examples
   and requirements. The analysis in the <a href="#history">History</a>
   section is a slightly shortened version of work by Steve Zilles.

  <p>César Acebal built the first <a
   href="http://transcendingcss.com/support/almcss.zip"> prototype.</a>
   Andrew Fedoniouk built <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Mar/0278.html">
   the second.</a> A <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Apr/0383.html">
   third prototype</a> was made by Alexis Deveria.
   <!--=================================================================-->

  <h2 class=no-num id=references>References</h2>

  <p id=normative-references>Normative references: <!--begin-normative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3-BREAK>[CSS3-BREAK]

   <dd>Rossen Atanassov; Elika J. Etemad. <a
    href="http://dev.w3.org/csswg/css3-break/"><cite>CSS Fragmentation Module
    Level 3.</cite></a> (Retrieved 4 February 2012). Proposal for a CSS
    module. URL: <a
    href="http://dev.w3.org/csswg/css3-break/">http://dev.w3.org/csswg/css3-break/</a>
    </dd>
   <!---->

   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

   <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
    href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS
    Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a>
    </dd>
   <!---->

   <dt id=CSS3BOX>[CSS3BOX]

   <dd>Bert Bos. <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
    model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>H&#229;kon Wium Lie; Melinda Grant. <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
    </dd>
   <!---->

   <dt id=CSS3POS>[CSS3POS]

   <dd>Bert Bos. <cite>CSS3 Positioning Module.</cite> (forthcoming). W3C
    Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
    module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
    </dd>
   <!---->

   <dt id=CSS3TBL>[CSS3TBL]

   <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
    W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3TEXT>[CSS3TEXT]

   <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
    href="http://www.w3.org/TR/2011/WD-css3-text-20110901/"><cite>CSS Text
    Level 3.</cite></a> 1 September 2011. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-text-20110901/">http://www.w3.org/TR/2011/WD-css3-text-20110901/</a>
    </dd>
   <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>H&#229;kon Wium Lie; Tab Atkins; Elika J. Etemad. <a
    href="http://www.w3.org/TR/2011/WD-css3-values-20110906/"><cite>CSS
    Values and Units Module Level 3.</cite></a> 6 September 2011. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-values-20110906/">http://www.w3.org/TR/2011/WD-css3-values-20110906/</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <p id=other-references>Other references: <!--begin-informative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=ACEBAL2010>[ACEBAL2010]

   <dd>C&#233;sar Fern&#225;ndez Acebal. <a
    href="http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf"><cite>ALMcss:
    Separaci&#243;n de estructura y presentaci&#243;n en la web mediante
    posicionamiento avanzado en CSS.</cite></a> 2010. Oviedo, Spain. PhD
    thesis URL: <a
    href="http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf">http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf</a>
    </dd>
   <!---->

   <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]

   <dd>Vincent Hardy; Rossen Atanassov. <a
    href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/"><cite>CSS
    Exclusions and Shapes Module Level 3.</cite></a> 13 December 2011. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/</a>
    </dd>
   <!---->

   <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]

   <dd>Alex Mogilevsky; et al. <a
    href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407"><cite>Grid
    Layout.</cite></a> 7 April 2011. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407">http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407</a>
    </dd>
   <!---->

   <dt id=CSS3BG>[CSS3BG]

   <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
    href="http://www.w3.org/TR/2011/CR-css3-background-20110215"><cite>CSS
    Backgrounds and Borders Module Level 3.</cite></a> 15 February 2011. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
    </dd>
   <!---->

   <dt id=CSS3COL>[CSS3COL]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
    Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
    </dd>
   <!---->

   <dt id=CSS3COLOR>[CSS3COLOR]

   <dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3GCPM>[CSS3GCPM]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608"><cite>CSS
    Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a>
    </dd>
   <!---->

   <dt id=CSS3GRID>[CSS3GRID]

   <dd>Alex Mogilevsky; Markus Mielke. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level&#160;3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
    </dd>
   <!---->

   <dt id=CSS3UI>[CSS3UI]

   <dd>Tantek &#199;elik. <a
    href="http://www.w3.org/TR/2004/CR-css3-ui-20040511"><cite>CSS3 Basic
    User Interface Module.</cite></a> 11 May 2004. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; et al. <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
    Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
    </dd>
   <!---->

   <dt id=SELECT>[SELECT]

   <dd>Tantek &#199;elik; et al. <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
    Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
    </dd>
   <!---->

   <dt id=WCAG20>[WCAG20]

   <dd>Ben Caldwell; et al. <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content
    Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->
  <!--=================================================================-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>&lsquo;<code class=css> </code>
    <ul>
     <li>slot()&rsquo; pseudo-element., <a href="#slot-pseudo-element."
      title="'', slot()'' pseudo-element."><strong>4.</strong></a>
    </ul>

   <li>anonymous block of a slot, <a href="#anonymous-block"
    title="anonymous block of a slot"><strong>2.6.</strong></a>

   <li>background, <a href="#background"
    title=background><strong>1.2.</strong></a>

   <li>background-image, <a href="#background-image"
    title=background-image><strong>1.2.</strong></a>

   <li>background-size, <a href="#background-size"
    title=background-size><strong>1.2.</strong></a>

   <li>block container, <a href="#block-container"
    title="block container"><strong>1.2.</strong></a>

   <li>block flow direction, <a href="#block-flow-direction"
    title="block flow direction"><strong>1.2.</strong></a>

   <li>bottom, <a href="#bottom" title=bottom><strong>1.2.</strong></a>

   <li>box-decoration-break, <a href="#box-decoration-break"
    title=box-decoration-break><strong>1.2.</strong></a>

   <li>box-shadow, <a href="#box-shadow"
    title=box-shadow><strong>1.2.</strong></a>

   <li>break-after, <a href="#break-after"
    title=break-after><strong>1.2.</strong></a>, <a href="#break-after0"
    title=break-after><strong>1.2.</strong></a>

   <li>break-before, <a href="#break-before"
    title=break-before><strong>1.2.</strong></a>, <a href="#break-before0"
    title=break-before><strong>1.2.</strong></a>

   <li>break-inside, <a href="#break-inside"
    title=break-inside><strong>1.2.</strong></a>, <a href="#break-inside0"
    title=break-inside><strong>1.2.</strong></a>

   <li>chain., <a href="#chain." title=chain.><strong>8.</strong></a>

   <li>chains, <a href="#chains0" title=chains><strong>8.</strong></a>

   <li>columns, <a href="#columns" title=columns><strong>1.2.</strong></a>

   <li>&lt;col-width&gt;, <a href="#ltcol-widthgt"
    title="&lt;col-width&gt;"><strong>2.2.</strong></a>

   <li>containing block, <a href="#containing-block"
    title="containing block"><strong>3.1.</strong></a>

   <li>content, <a href="#content" title=content><strong>1.2.</strong></a>

   <li>default slot., <a href="#default-slot."
    title="default slot."><strong>2.5.</strong></a>

   <li>direction, <a href="#direction"
    title=direction><strong>1.2.</strong></a>

   <li>display, <a href="#display0" title=display><strong>1.2.</strong></a>

   <li>element-based template., <a href="#element-based-template."
    title="element-based template."><strong>7.</strong></a>

   <li>float, <a href="#float" title=float><strong>1.2.</strong></a>

   <li>flow, <a href="#flow0" title=flow><strong>3.1.</strong></a>

   <li>fragmenter, <a href="#fragmenter"
    title=fragmenter><strong>1.2.</strong></a>

   <li>grid, <a href="#grid" title=grid><strong>2.4.</strong></a>

   <li>grid ancestor, <a href="#grid-ancestor"
    title="grid ancestor"><strong>2.</strong></a>

   <li>grid-columns, <a href="#grid-columns"
    title=grid-columns><strong>2.2.</strong></a>

   <li>grid element., <a href="#grid-element."
    title="grid element."><strong>2.</strong></a>

   <li>grid line,, <a href="#grid-line"
    title="grid line,"><strong>3.2.</strong></a>

   <li>grid-position, <a href="#grid-position0"
    title=grid-position><strong>3.3.</strong></a>

   <li>grid-position-x, <a href="#grid-position-x"
    title=grid-position-x><strong>3.2.</strong></a>

   <li>grid-position-y, <a href="#grid-position-y"
    title=grid-position-y><strong>3.2.</strong></a>

   <li>grid-rows, <a href="#grid-rows"
    title=grid-rows><strong>2.3.</strong></a>

   <li>grid-template, <a href="#grid-template0"
    title=grid-template><strong>2.1.</strong></a>

   <li>head edge, <a href="#head-edge"
    title="head edge"><strong>6.1.</strong></a>

   <li>height, <a href="#height" title=height><strong>1.2.</strong></a>

   <li>horizontal, <a href="#horizontal-element."
    title=horizontal><strong>1.2.</strong></a>

   <li>horizontal element, <a href="#horizontal-element."
    title="horizontal element"><strong>1.2.</strong></a>

   <li>horizontal writing mode, <a href="#horizontal-writing-mode"
    title="horizontal writing mode"><strong>1.2.</strong></a>

   <li>implicit template, <a href="#implicit-template"
    title="implicit template"><strong>2.1.</strong></a>

   <li>interactive, <a href="#interactive"
    title=interactive><strong>1.2.</strong></a>

   <li>left, <a href="#left" title=left><strong>1.2.</strong></a>

   <li><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>, <a
    href="#ltlengthgt" title="&lt;length&gt;"><strong>1.2.</strong></a>

   <li>margin, <a href="#margin" title=margin><strong>1.2.</strong></a>

   <li>margin-left, <a href="#margin-left"
    title=margin-left><strong>1.2.</strong></a>

   <li>margin-right, <a href="#margin-right"
    title=margin-right><strong>1.2.</strong></a>

   <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
    title="&lt;minmax&gt;"><strong>2.2.</strong></a>, <a href="#ltminmaxgt0"
    title="&lt;minmax&gt;"><strong>2.3.</strong></a>

   <li>non-interactive, <a href="#non-interactive"
    title=non-interactive><strong>1.2.</strong></a>

   <li>number of columns, <a href="#number-of-columns"
    title="number of columns"><strong>2.</strong></a>

   <li>number of rows, <a href="#number-of-rows"
    title="number of rows"><strong>2.</strong></a>

   <li>overflow, <a href="#overflow" title=overflow><strong>1.2.</strong></a>
    

   <li>page area, <a href="#page-area"
    title="page area"><strong>1.2.</strong></a>

   <li>page-based template, <a href="#page-based-template"
    title="page-based template"><strong>7.</strong></a>

   <li>position, <a href="#position" title=position><strong>1.2.</strong></a>
    

   <li>right, <a href="#right" title=right><strong>1.2.</strong></a>

   <li>&lt;row-height&gt;, <a href="#ltrow-heightgt"
    title="&lt;row-height&gt;"><strong>2.3.</strong></a>

   <li>slot, <a href="#slot" title=slot><strong>2.1.</strong></a>

   <li><a href="#ltstringgt"><var>&lt;string&gt;</var></a>, <a
    href="#ltstringgt" title="&lt;string&gt;"><strong>1.2.</strong></a>

   <li>tail edge, <a href="#tail-edge"
    title="tail edge"><strong>6.1.</strong></a>

   <li>top, <a href="#top" title=top><strong>1.2.</strong></a>

   <li>vertical, <a href="#vertical-element"
    title=vertical><strong>1.2.</strong></a>

   <li>vertical-align, <a href="#vertical-align"
    title=vertical-align><strong>1.2.</strong></a>

   <li>vertical element, <a href="#vertical-element"
    title="vertical element"><strong>1.2.</strong></a>

   <li>vertical writing mode, <a href="#vertical-writing-mode"
    title="vertical writing mode"><strong>1.2.</strong></a>

   <li>width, <a href="#width" title=width><strong>1.2.</strong></a>

   <li>writing-mode, <a href="#writing-mode"
    title=writing-mode><strong>1.2.</strong></a>

   <li>z-index, <a href="#z-index" title=z-index><strong>1.2.</strong></a>
  </ul>
  <!--end-index-->
  <!--=================================================================-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property href="#chains0">chains</a>

     <td>none | &lt;letter&gt;+ [ , &lt;letter&gt;+ ]*

     <td>none

     <td>template elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#flow0">flow</a>

     <td>auto | &lt;identifier&gt; | &lsquo;*&rsquo; | same

     <td>auto

     <td>elements with &lsquo;position&rsquo; equal to &lsquo;static&rsquo;
      or &lsquo;relative&rsquo;

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid">grid</a>

     <td>none | [ [ &lt;string&gt; [ / &lt;row-height&gt; ]? ]+ ]
      &lt;col-width&gt;*

     <td>none

     <td>block container elements

     <td>no

     <td>see individual properties

     <td>see individual properties

    <tr>
     <th><a class=property href="#grid-columns">grid-columns</a>

     <td>auto | &lt;col-width&gt;+

     <td>auto

     <td>block container elements

     <td>no

     <td>yes, between grids with the same number of tracks

     <td>N/A

    <tr>
     <th><a class=property href="#grid-position0">grid-position</a>

     <td>&lt;grid-position-x&gt; [ / &lt;grid-position-y&gt; ]?

     <td>auto

     <td>elements with &lsquo;position: absolute&rsquo;

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid-position-x">grid-position-x</a>, <a
      class=property href="#grid-position-y">grid-position-y</a>

     <td>auto | [ &lt;identifier&gt; | &lt;grid-line&gt; ] [ + &lt;span&gt; |
      - [ &lt;identifier&gt; | &lt;grid-line&gt; ] ]?

     <td>auto

     <td>elements with 'position: absolute'

     <td>no

     <td>no

     <td>N/A

    <tr>
     <th><a class=property href="#grid-rows">grid-rows</a>

     <td>auto | &lt;row-height&gt;+

     <td>auto

     <td>block container elements

     <td>no

     <td>yes, between grids with the same number of tracks

     <td>N/A

    <tr>
     <th><a class=property href="#grid-template0">grid-template</a>

     <td>none | &lt;string&gt;+

     <td>none

     <td>block container elements [CSS21]

     <td>no

     <td>no

     <td>N/A
  </table>
  <!--end-properties-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: html
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:0
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
sgml-basic-offset:0
sgml-transformation:'upcase
sgml-quick-keys:t
html-quick-keys:t
End:
-->
